/* ============================================================
   Vetdost, the cutting mat

   The whole surface is one self healing cutting mat. Two colours,
   mat green and white, and nothing else. Every colour, space and
   size in this file comes from the token block below, and nothing
   else in the file defines one.

   Loaded by the product site on top of base.css. It never loads
   vetdost.css, so none of these class names can collide with the
   clinic website. See the note at the top of base.css.

   Sections
     1.  Tokens
     2.  Reset and type
     3.  The surface: grid, diagonals, light, grain
     4.  Rules, sheets and labels
     5.  Buttons
     6.  Masthead
     7.  Hero and the measuring pad
     8.  Strips and section rhythm
     9.  Figure plates
     10. Pinned horizontal track
     11. Specification list
     12. Pricing columns
     13. Measured figures and quotes
     14. The name note
     15. Closing sheet and footer
     16. Product screens, shared with the app
     17. Detail columns
     18. The honest list
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root{
  /* The mat.
     This was #0E7A4A, which is the brightest part of the reference
     photograph. On it, pure white tops out at 5.38 to 1, so every
     faded tier of ink below it was mathematically incapable of
     reaching AA no matter how it was tuned, and 197 pieces of text
     on the home page alone were failing.

     It is now the shaded part of the same mat, the same green an
     octave down. White reads at about 10 to 1, which is what gives
     the quieter tiers below anywhere to live. --mat-lit keeps the
     original for the places that want the brighter green. */
  --mat:#08492E;
  --mat-lit:#0E7A4A;
  --white:#FFFFFF;

  /* screens resting on the mat */
  --screen:#06130E;
  --screen-2:#0A1C15;
  --screen-3:#040D09;

  /* Ink, which is white at four strengths. Every one of these is
     measured against --mat above, and the lowest still clears AA
     for small text. */
  --ink:#F3F9F5;            /* ~10.0 : 1 */
  --ink-70:rgba(243,249,245,.84);   /* ~7.4 : 1, body */
  --ink-45:rgba(243,249,245,.70);   /* ~5.5 : 1, labels */
  --ink-28:rgba(243,249,245,.64);   /* ~4.9 : 1, the quietest marks */

  /* hairlines, which is all the structure there is */
  --rule:rgba(255,255,255,.34);
  --rule-soft:rgba(255,255,255,.17);
  --rule-faint:rgba(255,255,255,.09);

  /* Ink and hairlines on a screen rather than on the mat. Raised
     for the same reason as the tiers above: at .50 and .38 the KPI
     labels and the search placeholder sat at 3.26 to 1, and this is
     the set the real dashboard uses too. */
  --on-screen:#E9F2EC;
  --on-screen-50:rgba(233,242,236,.70);
  --on-screen-38:rgba(233,242,236,.58);
  --hair-screen:rgba(255,255,255,.13);
  --hair-screen-soft:rgba(255,255,255,.09);
  --good:#6EE0A4;           /* the one functional tint, live states only */

  /* type */
  --display:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* measure */
  --maxw:1240px;
  --pad:34px;
  --grid-major:110px;
  --grid-minor:22px;

  /* the mat is flat, so there is one shadow and it belongs to screens */
  --lift:0 40px 90px -30px rgba(1,24,14,.75),0 8px 20px -8px rgba(1,24,14,.5);
}

@media(max-width:900px){ :root{ --pad:22px } }

/* ------------------------------------------------------------
   2. Reset and type
   ------------------------------------------------------------ */
*{box-sizing:border-box}

body.mat-body{
  margin:0;
  background:var(--mat);
  color:var(--ink);
  font-family:var(--display);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mat-body h1,
.mat-body h2,
.mat-body h3{margin:0;font-weight:500;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.mat-body p{margin:0}
.mat-body a{color:inherit;text-decoration:none}

.mat-body :focus-visible{outline:1px solid var(--white);outline-offset:3px}
.mat-body ::selection{background:var(--white);color:var(--mat)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* Uppercase is a rendering decision, never a decision in the copy.
   Every label is written in sentence case in the markup and turned
   up here, so the source stays readable and the house style holds. */
.lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45);
}

/* ------------------------------------------------------------
   3. The surface
   The mat is fixed, so content slides over a surface that stays put.
   ------------------------------------------------------------ */
.surface{position:fixed;inset:0;z-index:0;pointer-events:none}

.surface .grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--rule-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px),
    linear-gradient(var(--rule-faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-faint) 1px,transparent 1px);
  background-size:
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major),
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor);
  background-position:center center;
}

.surface .diag{position:absolute;inset:0;opacity:.5}

/* The mat is photographed under a light, not lit evenly. This is
   the falloff from that photograph, and it is the only gradient
   anywhere in the system. */
.surface .light{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 18%,rgba(255,255,255,.09),transparent 60%),
    linear-gradient(180deg,rgba(2,28,17,.30),transparent 22%,transparent 70%,rgba(2,28,17,.42));
}

/* Real grain, drawn once to a canvas in mat.js. Without it the
   green reads as flat vector fill rather than a surface. */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay}

.above{position:relative;z-index:2}

/* ------------------------------------------------------------
   4. Rules, sheets and labels
   The drafting rule that opens each sheet states its number and
   what is on it, so the structure carries information.
   ------------------------------------------------------------ */
.sheet{display:flex;align-items:center;gap:18px;padding-bottom:22px}
.sheet .ln{flex:1;height:1px;background:var(--rule-soft)}
.sheet .n,
.sheet .m{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;
}
.sheet .n{color:var(--ink-70)}
.sheet .m{color:var(--ink-28)}

/* registration marks, the corner crop marks on a drawing sheet */
.reg{position:absolute;width:16px;height:16px;z-index:1}
.reg::before,.reg::after{content:"";position:absolute;background:var(--rule)}
.reg::before{left:0;top:0;width:100%;height:1px}
.reg::after{left:0;top:0;width:1px;height:100%}
.reg.tr{transform:scaleX(-1)}
.reg.bl{transform:scaleY(-1)}
.reg.br{transform:scale(-1)}

/* ------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:14px;font-weight:500;
  padding:13px 22px;border:1px solid transparent;cursor:pointer;
  transition:.18s;white-space:nowrap;
}
.btn svg{width:15px;height:15px}

/* .mat-body a{color:inherit} is 0,1,1 and .btn-solid is 0,1,0, so
   every button that is a link took the page's ink instead of its
   own colour. On the solid button that is near white text on a
   white fill, which is how the primary call to action ended up at
   1.07 to 1. The class is doubled to win the specificity outright
   rather than by ordering, which the next rule added would undo. */
.mat-body .btn.btn-solid,
.btn.btn-solid{background:var(--white);color:var(--mat);font-weight:600}
.mat-body .btn.btn-solid:hover,
.btn.btn-solid:hover{background:var(--ink);color:var(--mat)}

.mat-body .btn.btn-line,
.btn.btn-line{border-color:var(--rule);color:var(--ink)}
.mat-body .btn.btn-line:hover,
.btn.btn-line:hover{border-color:var(--white);background:rgba(255,255,255,.09);color:var(--ink)}

/* ------------------------------------------------------------
   6. Masthead
   Solid, never translucent. A blurred bar floating over the mat
   reads as a sticker rather than part of the surface.
   ------------------------------------------------------------ */
.mast{position:sticky;top:0;z-index:70;background:var(--mat);border-bottom:1px solid var(--rule-soft)}
.mast-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:70px;display:flex;align-items:center;gap:30px;
}
.brand{display:flex;align-items:center;gap:11px}
.brand svg{width:22px;height:22px;color:var(--white)}
.brand .wm{font-size:17px;font-weight:600;letter-spacing:-.03em}
.mast nav{display:flex;gap:26px;margin-left:16px}
.mast nav a{font-size:13.5px;color:var(--ink-70);transition:.15s;white-space:nowrap}
.mast nav a:hover{color:var(--ink)}
.mast .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.mast .right .sign{font-size:13.5px;color:var(--ink-70)}
.mast .right .sign:hover{color:var(--ink)}

/* Narrow: the links drop to their own rule under the brand rather
   than hiding behind a burger. One nav in the markup either way,
   and nothing to open, so there is no state to get wrong. */
@media(max-width:900px){
  .mast-in{flex-wrap:wrap;height:auto;padding-top:14px;gap:0 16px}
  .mast nav{
    order:3;width:100%;margin:12px calc(var(--pad) * -1) 0;
    padding:10px var(--pad);gap:22px;
    border-top:1px solid var(--rule-faint);
    overflow-x:auto;scrollbar-width:none;
  }
  .mast nav::-webkit-scrollbar{display:none}
  .mast .right{gap:14px}
}

/* ------------------------------------------------------------
   7. Hero and the measuring pad
   Drag anywhere on the mat and it cuts a measured line. The
   millimetres are real: 25.4 over 96, the CSS pixel.
   ------------------------------------------------------------ */
.hero{position:relative;min-height:76vh;display:flex;align-items:center;padding:96px 0 70px;overflow:hidden}
.cut{position:absolute;inset:0;z-index:1;cursor:crosshair;touch-action:none}
.cut line,.cut path{stroke:var(--white);fill:none;vector-effect:non-scaling-stroke}
.cut text{fill:var(--white);font-family:var(--mono);font-size:11px;letter-spacing:.06em}

.hero-in{position:relative;z-index:2;pointer-events:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.hero-in a,.hero-in button{pointer-events:auto}
.hero h1{font-size:clamp(46px,8.4vw,124px);font-weight:400;letter-spacing:-.05em;line-height:.92;max-width:11ch}
.hero h1 em{font-style:normal;color:rgba(255,255,255,.42)}
.hero .sub{font-size:clamp(15.5px,1.5vw,18px);color:var(--ink-70);max-width:44ch;margin-top:30px;line-height:1.6;font-weight:300}
.hero .acts{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
.hero .tip{
  margin-top:34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-28);
}

/* ------------------------------------------------------------
   8. Strips and section rhythm
   ------------------------------------------------------------ */
.integ{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.integ-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;flex-wrap:wrap}
.integ-in .c{
  flex:1 1 auto;padding:20px 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
  text-align:center;border-left:1px solid var(--rule-faint);
}
.integ-in .c:first-child{border-left:0;text-align:left;color:var(--ink-28)}

.s{padding:130px 0}
@media(max-width:900px){ .s{padding:96px 0} }
.head h2{font-size:clamp(30px,4.4vw,56px);font-weight:400;letter-spacing:-.04em;max-width:17ch}
.head p{color:var(--ink-70);margin-top:20px;max-width:50ch;font-weight:300;font-size:16.5px}

/* ------------------------------------------------------------
   9. Figure plates
   Every product screenshot is a numbered plate with a caption,
   the way a figure appears in a manual.
   ------------------------------------------------------------ */
.plate{margin-top:56px}
.fig{position:relative;background:var(--screen);border:1px solid rgba(255,255,255,.10);box-shadow:var(--lift)}
.cap{
  display:flex;gap:14px;align-items:baseline;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-28);
}
.cap b{color:var(--ink-70);font-weight:400}

/* ------------------------------------------------------------
   10. Pinned horizontal track
   Vertical scroll drives the modules sideways. Below 940px, and
   for anyone who asked for less motion, it is a plain swipe.
   ------------------------------------------------------------ */
.pin{position:relative}
.pin-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.pin-top{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.pin-track{display:flex;gap:1px;padding:34px var(--pad) 0;will-change:transform}

.mod{
  flex:0 0 372px;border:1px solid var(--rule-soft);background:rgba(2,32,19,.22);
  padding:30px 28px 26px;display:flex;flex-direction:column;min-height:352px;
  transition:background .2s,border-color .2s;
}
.mod:hover{background:rgba(2,32,19,.42);border-color:var(--rule)}
.mod .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-28)}
.mod h3{font-size:25px;font-weight:400;letter-spacing:-.035em;margin-top:22px}
.mod .d{font-size:14px;color:var(--ink-70);margin-top:12px;font-weight:300;line-height:1.55}
.mod .tags{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:6px}
.mod .tags em{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45);border:1px solid var(--rule-soft);padding:4px 9px;
}

/* dotted leaders, as on a bill of materials */
.spec{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.spec li{display:flex;align-items:baseline;gap:9px;font-size:12.5px}
.spec li .k{color:var(--ink-70);font-weight:300;white-space:nowrap}
.spec li .dot{flex:1;border-bottom:1px dotted rgba(255,255,255,.22);transform:translateY(-3px)}
.spec li .v{font-family:var(--mono);font-size:11px;color:var(--ink-45);white-space:nowrap}

/* the tape measure that runs under the track */
.tape{max-width:var(--maxw);margin:0 auto;padding:30px var(--pad) 0;width:100%}
.tape .bar{position:relative;height:26px;border-top:1px solid var(--rule-soft)}
.tape .ticks{position:absolute;inset:0;display:flex}
.tape .ticks i{flex:1;border-left:1px solid var(--rule-faint);height:7px}
.tape .ticks i:nth-child(5n+1){height:13px;border-left-color:var(--rule-soft)}
.tape .run{position:absolute;top:-1px;left:0;height:1px;background:var(--white)}
.tape .cur{position:absolute;top:-5px;width:1px;height:11px;background:var(--white)}
.tape .rd{
  position:absolute;right:0;top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-28);
}

.pin.nopin .pin-inner{position:static;height:auto;overflow-x:auto;scrollbar-width:none}
.pin.nopin .pin-inner::-webkit-scrollbar{display:none}
.pin.nopin .pin-track{transform:none !important}
.pin.nopin .tape{display:none}

/* ------------------------------------------------------------
   11. Specification list
   ------------------------------------------------------------ */
.bom{margin-top:52px;border-top:1px solid var(--rule)}
.bom .row{display:flex;align-items:baseline;gap:14px;padding:20px 0;border-bottom:1px solid var(--rule-faint)}
.bom .row .i{font-family:var(--mono);font-size:11px;color:var(--ink-28);width:34px;flex:none}
.bom .row .k{font-size:16.5px;font-weight:300}
.bom .row .dot{flex:1;border-bottom:1px dotted rgba(255,255,255,.2);transform:translateY(-4px)}
.bom .row .v{font-family:var(--mono);font-size:13px;color:var(--ink)}
.bom .row.tot{border-bottom:0;border-top:1px solid var(--rule);margin-top:-1px}
.bom .row.tot .k{font-size:19px}
.bom .row.tot .v{font-size:22px;letter-spacing:-.02em}

/* ------------------------------------------------------------
   12. Pricing columns
   Columns divided by hairlines, not boxes. A box on the mat reads
   as something dropped on it.
   ------------------------------------------------------------ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--rule)}
.plan{padding:38px 30px 34px;border-left:1px solid var(--rule-faint);position:relative}
.plan:first-child{border-left:0}
.plan.rec{background:rgba(2,32,19,.26)}
.plan .rc{
  position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.plan .pn{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);
}
.plan .pp{margin-top:24px;display:flex;align-items:baseline;gap:6px}
.plan .pp .a{font-size:56px;font-weight:300;letter-spacing:-.05em}
.plan .pp .u{font-family:var(--mono);font-size:11px;color:var(--ink-45)}
.plan .pd{font-size:13.5px;color:var(--ink-70);margin-top:14px;font-weight:300;min-height:60px}
.plan .btn{width:100%;margin-top:8px}
.plan ul{
  list-style:none;margin:30px 0 0;padding:26px 0 0;
  border-top:1px solid var(--rule-faint);display:flex;flex-direction:column;gap:12px;
}
.plan li{display:flex;gap:11px;font-size:13.5px;font-weight:300;color:var(--ink)}
.plan li .m{font-family:var(--mono);font-size:11px;color:var(--ink-45);flex:none;width:10px}
.plan li.no{color:var(--ink-28)}
@media(max-width:900px){
  .plans{grid-template-columns:1fr}
  .plan{border-left:0;border-top:1px solid var(--rule-faint)}
  .plan:first-child{border-top:0}
}

/* ------------------------------------------------------------
   13. Measured figures and quotes
   ------------------------------------------------------------ */
.proof{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:20px}
.proof .p{padding:36px 24px 30px;border-left:1px solid var(--rule-faint)}
.proof .p:first-child{border-left:0}
.proof .n{font-size:52px;font-weight:300;letter-spacing:-.05em;line-height:1}
.proof .k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-45);margin-top:14px;
}
@media(max-width:820px){
  .proof{grid-template-columns:1fr 1fr}
  .proof .p:nth-child(3){border-left:0}
}

.quote blockquote{font-size:clamp(24px,3.6vw,44px);font-weight:300;letter-spacing:-.04em;line-height:1.18;margin:0;max-width:20ch}
.quote .by{margin-top:38px;display:flex;gap:14px;align-items:baseline}
.quote .by .l{width:44px;height:1px;background:var(--rule);transform:translateY(-6px)}
.quote .by b{font-weight:400;font-size:15px}
.quote .by span{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);display:block;margin-top:4px;
}

/* ------------------------------------------------------------
   14. The name note
   ------------------------------------------------------------ */
.dost{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:76px 0}
.dost-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:180px 1fr;gap:40px}
.dost .w{font-size:34px;font-weight:300;letter-spacing:-.04em}
.dost .pos{font-family:var(--mono);font-size:11px;color:var(--ink-45);margin-top:6px;letter-spacing:.08em}
.dost .t{font-size:clamp(19px,2.4vw,27px);font-weight:300;letter-spacing:-.03em;line-height:1.42;max-width:34ch}
@media(max-width:760px){ .dost-in{grid-template-columns:1fr;gap:22px} }

/* ------------------------------------------------------------
   15. Closing sheet and footer
   The footer is a drawing title block, because that is what a
   title block is for.
   ------------------------------------------------------------ */
.close{position:relative;padding:150px 0 140px;overflow:hidden}
.close-in{position:relative;z-index:2;pointer-events:none;text-align:center}
.close-in a{pointer-events:auto}
.close h2{font-size:clamp(34px,6vw,80px);font-weight:400;letter-spacing:-.05em;line-height:.98}
.close p{color:var(--ink-70);margin:26px auto 0;max-width:44ch;font-weight:300}
.close .acts{display:flex;gap:12px;justify-content:center;margin-top:40px;flex-wrap:wrap}

.mat-foot{border-top:1px solid var(--rule)}
.fcols{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad) 46px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.fcols h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-28);font-weight:400;margin:0 0 16px;
}
.fcols a{display:block;font-size:13.5px;color:var(--ink-70);padding:5px 0;font-weight:300}
.fcols a:hover{color:var(--ink)}
.fcols .about{font-size:13.5px;color:var(--ink-70);font-weight:300;max-width:30ch;margin-top:16px;line-height:1.6}

.tblock{border-top:1px solid var(--rule-soft);display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--maxw);margin:0 auto}
.tblock .c{padding:18px var(--pad);border-left:1px solid var(--rule-faint)}
.tblock .c:first-child{border-left:0}
.tblock .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-28)}
.tblock .v{font-family:var(--mono);font-size:11px;color:var(--ink-70);margin-top:6px;letter-spacing:.06em}
@media(max-width:900px){
  .fcols{grid-template-columns:1fr 1fr}
  .tblock{grid-template-columns:1fr 1fr}
  .tblock .c{border-left:0;border-top:1px solid var(--rule-faint)}
}

/* ------------------------------------------------------------
   16. Product screens, shared with the app
   One set of components, used by the figure plates on the product
   site and by the practice software itself, so the marketing can
   never drift from the thing it is selling.
   ------------------------------------------------------------ */
.ui{background:var(--screen);color:var(--on-screen);font-size:14px;display:grid;grid-template-columns:214px 1fr}

.ui-side{background:var(--screen-3);border-right:1px solid var(--hair-screen);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.ui-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;font-weight:600;font-size:14.5px;letter-spacing:-.02em}
.ui-brand svg{width:17px;height:17px;color:var(--white)}
.ui-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:12.5px;color:var(--on-screen-50);cursor:pointer;font-weight:300}
.ui-nav svg{width:15px;height:15px;opacity:.7}
.ui-nav:hover{background:rgba(255,255,255,.04);color:var(--on-screen)}
.ui-nav.on{background:var(--mat);color:var(--white);font-weight:500}
.ui-nav.on svg{opacity:1}
.ui-nav .b{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--on-screen-38)}
.ui-nav.on .b{color:rgba(255,255,255,.8)}
.ui-side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-screen);display:flex;align-items:center;gap:9px}
.ui-side .foot .av{width:28px;height:28px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:11px;font-weight:600}
.ui-side .foot b{font-size:12px;font-weight:500;display:block}
.ui-side .foot span{font-family:var(--mono);font-size:9.5px;color:var(--on-screen-38)}

.ui-main{min-width:0;display:flex;flex-direction:column}
.ui-top{height:52px;border-bottom:1px solid var(--hair-screen);display:flex;align-items:center;gap:14px;padding:0 18px}
.ui-search{flex:1;max-width:330px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.09);padding:7px 11px;font-size:12.5px;color:var(--on-screen-38);font-weight:300}
.ui-search svg{width:14px;height:14px}
.ui-top .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ui-btn{background:var(--white);color:var(--mat);font-size:12px;font-weight:600;padding:7px 13px;border:0;cursor:pointer;font-family:var(--display)}
.ui-btn.ghost{background:transparent;color:var(--on-screen);border:1px solid rgba(255,255,255,.12)}
.ui-ic{width:32px;height:32px;border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;color:var(--on-screen-50);position:relative;font-size:11px}
.ui-ic svg{width:15px;height:15px}
.ui-ic .dot{position:absolute;top:7px;right:8px;width:5px;height:5px;background:var(--mat);border-radius:50%}

.ui-body{padding:20px}
.ui-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.ui-h h4{margin:0;font-size:20px;font-weight:400;letter-spacing:-.03em}
.ui-h .s{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-screen-38);margin-top:6px}

.ui-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair-screen);margin-bottom:16px}
.ui-kpi{padding:15px 16px;border-left:1px solid var(--hair-screen)}
.ui-kpi:first-child{border-left:0}
.ui-kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-screen-38)}
.ui-kpi .v{font-size:27px;font-weight:400;letter-spacing:-.04em;margin-top:9px;font-variant-numeric:tabular-nums}
.ui-kpi .d{font-family:var(--mono);font-size:10px;color:var(--on-screen-38);margin-top:4px}
.ui-kpi .d.up{color:var(--good)}

.ui-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.ui-col{display:flex;flex-direction:column;gap:16px}
.ui-panel{border:1px solid var(--hair-screen)}
.ui-ph{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--hair-screen)}
.ui-ph b{font-size:13px;font-weight:500}
.ui-ph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-screen-38)}

.ui-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--hair-screen-soft)}
.ui-row:last-child{border-bottom:0}
.ui-row:hover{background:rgba(255,255,255,.025)}
.ui-row .t{font-family:var(--mono);font-size:11px;color:var(--on-screen-38);width:42px;flex:none}
.ui-row .w{flex:1;min-width:0}
.ui-row .w b{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px}
.ui-row .w .sp{font-family:var(--mono);font-size:9.5px;color:var(--on-screen-38);border:1px solid rgba(255,255,255,.1);padding:1px 5px;font-weight:400}
.ui-row .w small{font-size:11.5px;color:var(--on-screen-50);font-weight:300}
.ui-row .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-screen-50);white-space:nowrap}
.ui-row .st.on{color:var(--good)}

.ui-list{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--hair-screen-soft);align-items:flex-start}
.ui-list:last-child{border-bottom:0}
.ui-list .n{font-family:var(--mono);font-size:10px;color:var(--on-screen-38);flex:none;margin-top:2px}
.ui-list b{font-size:12.5px;font-weight:500;display:block}
.ui-list small{font-size:11.5px;color:var(--on-screen-50);display:block;margin-top:1px;font-weight:300}
.ui-list .tm{font-family:var(--mono);font-size:9.5px;color:var(--on-screen-38);flex:none}

.ui-bars{padding:16px}
.ui-bars .big{font-size:24px;font-weight:400;letter-spacing:-.04em}
.ui-bars .set{display:flex;align-items:flex-end;gap:7px;height:76px;margin-top:14px}
.ui-bars .set i{flex:1;background:rgba(255,255,255,.13);display:block}
.ui-bars .set i.hi{background:var(--white)}
.ui-bars .x{display:flex;gap:7px;margin-top:7px}
.ui-bars .x span{flex:1;text-align:center;font-family:var(--mono);font-size:9px;color:var(--on-screen-38)}

/* the compact variant used inside a figure plate */
.fig .ui{font-size:13px}
.fig .ui-kpis{grid-template-columns:repeat(3,1fr)}

@media(max-width:1000px){
  .ui-grid{grid-template-columns:1fr}
  .ui-kpis{grid-template-columns:repeat(2,1fr)}
  .ui-kpi:nth-child(3){border-left:0}
}
@media(max-width:820px){
  .ui{grid-template-columns:1fr}
  .ui-side{display:none}
}

/* ------------------------------------------------------------
   17. Detail columns

   Three blocks side by side, divided by hairlines rather than sat
   in boxes. The bullets are set in mono and marked with a rule,
   because a round bullet on a drawing sheet looks borrowed.
   ------------------------------------------------------------ */
.details{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:44px}
.detail{padding:34px 28px 30px;border-left:1px solid var(--rule-faint)}
.detail:first-child{border-left:0}
.detail h3{font-size:19px;font-weight:400;letter-spacing:-.03em}
.detail p{font-size:14px;color:var(--ink-70);margin-top:12px;font-weight:300;line-height:1.55}
.detail ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.detail li{display:flex;gap:10px;font-size:12.5px;color:var(--ink-70);font-weight:300;line-height:1.45}
.detail li::before{
  content:"";flex:none;width:9px;height:1px;background:var(--rule);
  margin-top:9px;
}
@media(max-width:900px){
  .details{grid-template-columns:1fr}
  .detail{border-left:0;border-top:1px solid var(--rule-faint)}
  .detail:first-child{border-top:0}
}

/* a section rule that carries its own anchor, used down a long page */
.band{padding:110px 0 0}
.band:first-of-type{padding-top:0}

/* ------------------------------------------------------------
   18. The honest list

   What is not built yet, with the stage against it. It earns more
   trust than the feature list above it, so it is set as plainly as
   a schedule of works.
   ------------------------------------------------------------ */
.road{margin-top:44px;border-top:1px solid var(--rule)}
.road .r{
  display:grid;grid-template-columns:96px 260px 1fr;gap:24px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--rule-faint);
}
.road .stage{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);border:1px solid var(--rule-soft);padding:4px 0;text-align:center;
}
.road .r.next .stage{color:var(--ink);border-color:var(--rule)}
.road .what{font-size:18px;font-weight:400;letter-spacing:-.03em}
.road .why{font-size:14px;color:var(--ink-70);font-weight:300;line-height:1.55}
@media(max-width:820px){
  .road .r{grid-template-columns:96px 1fr;gap:14px 20px}
  .road .why{grid-column:2}
}

/* ------------------------------------------------------------
   19. Questions

   A disclosure list, ruled rather than boxed. The marker is a plain
   cross that turns, because a chevron on a drawing sheet is another
   borrowed shape.
   ------------------------------------------------------------ */
.qs{margin-top:44px;border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule-faint)}
.q summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-size:19px;font-weight:400;letter-spacing:-.03em;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:8px;top:33px;
  width:13px;height:1px;background:var(--ink-45);
}
.q summary::before{
  content:"";position:absolute;right:14px;top:27px;
  width:1px;height:13px;background:var(--ink-45);transition:transform .2s,opacity .2s;
}
.q[open] summary::before{transform:rotate(90deg);opacity:0}
.q summary:hover::after,.q summary:hover::before{background:var(--ink)}
.q .a{padding:0 60px 26px 0;display:flex;flex-direction:column;gap:14px}
.q .a p{font-size:15px;color:var(--ink-70);font-weight:300;line-height:1.65;max-width:70ch}

/* ------------------------------------------------------------
   20. Comparison table

   Wide, so it scrolls inside its own container rather than pushing
   the page sideways.
   ------------------------------------------------------------ */
.cmp-wrap{margin-top:44px;overflow-x:auto;scrollbar-width:thin}
.cmp{width:100%;min-width:660px;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--rule-faint);vertical-align:top}
.cmp thead th{
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);font-weight:400;
}
.cmp tbody th{font-size:14px;font-weight:300;color:var(--ink);width:38%}
.cmp td{font-size:13px;color:var(--ink-70);font-weight:300;font-family:var(--mono)}
.cmp tbody tr:hover{background:rgba(2,32,19,.22)}
.cmp .col-rec{background:rgba(2,32,19,.26)}

/* ------------------------------------------------------------
   21. Forms

   Fields are ruled underneath rather than boxed, the way a form is
   drawn rather than the way a component library ships one. The
   focus ring is the one exception: it is a full outline, because a
   focus state has to be unmissable.
   ------------------------------------------------------------ */
.signup{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-top:1px solid var(--rule);margin-top:44px}
.sform{padding:40px 44px 44px 0}
.frow{margin-bottom:26px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sform label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:9px;
}
/* A field has to look like somewhere you can type.

   These were transparent with a single hairline underline at twenty
   per cent white. On the mat that reads as no field at all: there is
   nothing to aim at, and a form nobody can see is a form nobody
   fills in. Each one is now cut into the surface, dark inset with a
   full border, which is both more visible and more like a real mat. */
.sform input[type=text],
.sform input[type=email],
.sform input[type=tel],
.sform select{
  width:100%;
  background:rgba(0,0,0,.26);
  color:var(--ink);
  font-family:var(--display);font-size:16px;font-weight:400;
  border:1px solid rgba(255,255,255,.34);
  padding:13px 14px;
  border-radius:0;
  transition:border-color .15s,background .15s;
}
.sform select{
  appearance:none;cursor:pointer;
  /* the chevron, drawn rather than left to the platform, which
     renders a light one that vanishes on a dark field */
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-70) 50%),
                   linear-gradient(135deg,var(--ink-70) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.sform select option{background:#0A1C15;color:var(--ink)}
.sform input::placeholder{color:rgba(243,249,245,.42)}
.sform input:hover,
.sform select:hover{border-color:rgba(255,255,255,.5)}
.sform input:focus,
.sform select:focus{
  outline:none;
  border-color:var(--white);
  background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.sform input:focus-visible,
.sform select:focus-visible{outline:1px solid var(--white);outline-offset:2px}
/* :user-invalid only fires after the visitor has actually had a go,
   so nothing is marked wrong before it has been filled in. */
.sform input:user-invalid{border-color:#F09A85}

/* Labels were 45 per cent white at ten pixels, which is legible on a
   screenshot and not much else. */
.sform label{color:var(--ink-70);font-size:10.5px}

.plan-pick{border:1px solid var(--rule-soft);padding:20px 22px;margin:34px 0 26px;background:rgba(2,32,19,.22)}
.plan-pick .lbl{display:block}
.plan-pick .nm{font-size:26px;font-weight:400;letter-spacing:-.04em;margin-top:10px}
.plan-pick .pr{font-size:13.5px;color:var(--ink-70);font-weight:300;margin-top:6px}

.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.consent input{
  appearance:none;flex:none;width:20px;height:20px;margin-top:1px;
  border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.26);cursor:pointer;
  position:relative;transition:.15s;
}
.consent:hover input{border-color:rgba(255,255,255,.6)}
.consent input:checked{background:var(--white);border-color:var(--white)}
/* the tick, drawn so it is visible against the white fill */
.consent input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #0E7A4A;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.consent input:focus-visible{outline:1px solid var(--white);outline-offset:3px}
.consent span{
  font-size:13.5px;color:var(--ink-70);font-weight:300;line-height:1.55;
  font-family:var(--display);letter-spacing:0;text-transform:none;
}
.sform .fine{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-45);margin-top:16px}
.sform > .btn{width:100%}

/* what happens next, set as a numbered schedule */
.next-card{padding:40px 0 44px 44px;border-left:1px solid var(--rule-faint)}
.next-card h3{font-size:19px;font-weight:400;letter-spacing:-.03em}
.next-card ol{list-style:none;margin:26px 0 0;padding:0;counter-reset:step}
.next-card li{
  counter-increment:step;padding:0 0 22px 42px;position:relative;
  font-size:13.5px;color:var(--ink-70);font-weight:300;line-height:1.55;
}
.next-card li::before{
  content:"0" counter(step);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-28);
}
.next-card li b{display:block;color:var(--ink);font-weight:400;font-size:15px;margin-bottom:5px;letter-spacing:-.02em}
.next-card .rule{border-top:1px solid var(--rule-faint);padding-top:22px;margin-top:6px}
.next-card .rule p{font-size:13px;color:var(--ink-45);font-weight:300;line-height:1.6}

@media(max-width:900px){
  .signup{grid-template-columns:1fr}
  .sform{padding:34px 0}
  .frow2{grid-template-columns:1fr;gap:0}
  .next-card{padding:34px 0 40px;border-left:0;border-top:1px solid var(--rule-faint)}
}

/* the confirmation */
.done{max-width:56ch;padding:70px 0 90px}
.done .tick{width:42px;height:42px;border:1px solid var(--rule);position:relative;margin-bottom:30px}
.done .tick::before{
  content:"";position:absolute;left:12px;top:20px;width:8px;height:1px;
  background:var(--white);transform:rotate(45deg);transform-origin:left center;
}
.done .tick::after{
  content:"";position:absolute;left:17px;top:23px;width:15px;height:1px;
  background:var(--white);transform:rotate(-45deg);transform-origin:left center;
}
.done h2{font-size:clamp(30px,4.2vw,52px);font-weight:400;letter-spacing:-.045em}
.done p{color:var(--ink-70);font-weight:300;margin-top:20px;font-size:16px;line-height:1.6}
.done .acts{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* ------------------------------------------------------------
   22. Long form prose

   Legal and policy text. Measure held near 70 characters, headings
   ruled, and definition rows for the things people actually scan
   for, which on a privacy notice is who holds what and for how long.
   ------------------------------------------------------------ */
.prose{max-width:74ch;margin-top:44px}
.prose h2{font-size:26px;font-weight:400;letter-spacing:-.035em;margin:56px 0 0;padding-top:22px;border-top:1px solid var(--rule-faint)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:17px;font-weight:400;letter-spacing:-.02em;margin:30px 0 0}
.prose p{font-size:15.5px;color:var(--ink-70);font-weight:300;line-height:1.7;margin-top:14px}
.prose ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.prose li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-70);font-weight:300;line-height:1.6}
.prose li::before{content:"";flex:none;width:10px;height:1px;background:var(--rule);margin-top:11px}
.prose strong{color:var(--ink);font-weight:400}
.prose a{border-bottom:1px solid var(--rule);color:var(--ink)}
.prose a:hover{border-bottom-color:var(--white)}

/* a value still to be filled in, so it cannot be missed */
.tbc{
  font-family:var(--mono);font-size:.86em;letter-spacing:.04em;color:var(--ink);
  border-bottom:1px dashed var(--ink-45);padding-bottom:1px;
}

/* ------------------------------------------------------------
   23. Autofill

   Chrome paints its own pale blue over any field it fills and
   there is no property that turns it off. The only thing it will
   not paint over is an inset shadow, so the field's own surface is
   redrawn as one, and the text colour is set through
   -webkit-text-fill-color, which is the one autofill respects.

   Without this a filled form looks like a different form from the
   empty one: pale boxes next to dark ones, which is exactly what
   it looked like.
   ------------------------------------------------------------ */
.sform input:-webkit-autofill,
.sform input:-webkit-autofill:hover,
.sform input:-webkit-autofill:focus,
.sform select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:inset 0 0 0 1000px #062E1D;
  box-shadow:inset 0 0 0 1000px #062E1D;
  border-color:rgba(255,255,255,.44);
  caret-color:var(--ink);
  /* Chrome animates its own fill in; a long transition on the
     shadow is the accepted way to keep ours on top. */
  transition:background-color 5000s ease-in-out 0s;
}
.sform input:-webkit-autofill:focus{
  border-color:var(--white);
  -webkit-box-shadow:inset 0 0 0 1000px #062E1D,0 0 0 3px rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1000px #062E1D,0 0 0 3px rgba(255,255,255,.14);
}

/* Inputs and selects have to agree on height or a filled row steps
   out of line with the one beside it. */
.sform input[type=text],
.sform input[type=email],
.sform input[type=tel],
.sform select{
  height:52px;
  line-height:normal;
}

/* ------------------------------------------------------------
   24. Touch targets

   On a phone the masthead links were 22px tall and the footer
   links 24px. Both are comfortably inside a thumb's margin of
   error, which is how you end up tapping Pricing when you meant
   Features. Nothing here changes how any of it looks: the extra
   height is padding around the same text.
   ------------------------------------------------------------ */
@media(max-width:900px){
  .mast nav a{padding:10px 0;display:inline-flex;align-items:center}
  .mast .right .sign{padding:11px 0;display:inline-flex;align-items:center}
  .fcols a{padding:10px 0}
  .integ-in .c a{padding:10px 0;display:inline-block}
  .tblock .c a{padding:11px 0;display:inline-block}
  .mast .brand,
  .fcols .brand{padding:7px 0}
  .q summary{padding-top:20px;padding-bottom:20px}
  /* the buttons are already tall enough, but they should fill the
     width rather than sit in the middle of a wide empty row */
  .hero .acts .btn,
  .close .acts .btn,
  .done .acts .btn{flex:1 1 auto;min-width:180px}
}