/* Docket Entry law-firm site: type scale, buttons, "The point" and the security picture.
   Linked after site.css, security.css and onboarding.css on every page.
   Type scale: minor third, ratio 1.2, base 18px at 1440 and 16px at 390. Fluid between 390px and 1440px.
   Fluid method (Utopia): preferred = intercept(rem) + (max-min)/10.5 vw, so it lands exactly on min at 390 and max at 1440. */

/* ============ 1. tokens ============ */
:root{
  /* action colour: the one colour used for the primary button and nothing else */
  --action:#4034E8;          /* rest */
  --action-hover:#3427D2;    /* hover: one step darker */
  --action-press:#281DAC;    /* pressed: two steps darker */
  --on-action:#FFFFFF;       /* label on the action fill */
  --action-arrow:#C6EC7C;    /* arrow on the action fill (the lime already in the markup) */
  --lime-press:#B7DB68;      /* pressed state of the lime button used on navy */
  --ring:#151D35;            /* focus ring on cream, white, sage and lime */
  --ring-on-dark:#C6EC7C;    /* focus ring on navy */

  /* fluid type, 390 -> 1440 (minor third, 18 x 1.2^n at 1440, 16 x 1.2^n at 390) */
  --f-h1:clamp(2.5rem,1.9429rem + 2.2857vw,4rem);          /* 40 -> 64   display and h1 */
  --f-h2:clamp(2.0625rem,1.575rem + 2vw,3.375rem);         /* 33 -> 54   h2 and the statement lines of "The point" */
  --f-h3:clamp(1.75rem,1.5411rem + .8571vw,2.3125rem);     /* 28 -> 37   h3 */
  --f-list:clamp(1.4375rem,1.2518rem + .7619vw,1.9375rem); /* 23 -> 31   "The point" list line */
  --f-card:clamp(1.4375rem,1.3679rem + .2857vw,1.625rem);  /* 23 -> 26   card titles, article sub-heads */
  --f-lead:clamp(1.1875rem,1.1179rem + .2857vw,1.375rem);  /* 19 -> 22   lead */
  --f-body:clamp(1rem,.9536rem + .1905vw,1.125rem);        /* 16 -> 18   body and intro paragraphs */
  --f-small:clamp(.875rem,.8518rem + .0952vw,.9375rem);    /* 14 -> 15   small */
  --f-eyebrow:clamp(.875rem,.8286rem + .1905vw,1rem);      /* 14 -> 16   eyebrow, DM Mono caps */
  --f-label:clamp(.8125rem,.7893rem + .0952vw,.875rem);    /* 13 -> 14   mono labels */
  --f-micro:clamp(.75rem,.7268rem + .0952vw,.8125rem);     /* 12 -> 13   docket illustration labels: nothing on the site is under 12 */
  --t-h4:1.375rem;           /* 22 fixed   sub-heads */
  --t-ui:1rem;               /* 16 fixed   nav, table cells, form labels */
  --t-caption:.8125rem;      /* 13 fixed   chips inside diagrams */

  /* aliases used below */
  --t-body:var(--f-body); --f-body-lg:var(--f-body); --t-sm:var(--f-small); --t-lead:var(--f-lead);
  --t-label:var(--f-label); --t-micro:var(--f-micro); --t-eyebrow:var(--f-eyebrow);
  --track-eyebrow:.1em;
}

/* ============ 2. type roles ============ */
body{font-size:var(--f-body);line-height:1.6;font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4,.point-a,.point-b,.point-list,.eyebrow{text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
.lead,.body,.prose p{text-wrap:pretty;hyphens:manual}

.display,.hero .display{font-size:var(--f-h1);line-height:1.05;font-weight:700;letter-spacing:-.03em}
.h1{font-size:var(--f-h1);line-height:1.05;font-weight:700;letter-spacing:-.03em}
.h2{font-size:var(--f-h2);line-height:1.05;font-weight:700;letter-spacing:-.03em}
.h3{font-size:var(--f-h3);line-height:1.15;font-weight:700;letter-spacing:-.02em}
.h4{font-size:var(--t-h4);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.lead{font-size:var(--f-lead);line-height:1.5;max-width:36rem}            /* 36rem = 576px = about 52 characters at 22px */
.body{font-size:var(--f-body);line-height:1.6}
.card .body{font-size:var(--f-body)}
.small,.kind-line,.crumbs,.byline,.field .help,.icard .meta,.foot-bot,.foot-tag,.foot-nav,.notice,.err,.choice-d,.chain-b{font-size:var(--f-small);line-height:1.5}
.dk-note{font-size:var(--t-caption)}
.steps h3{font-size:var(--t-h4);line-height:1.25}
.steps p,.ticks li{font-size:var(--f-body)}
.nav a,.mobile-nav a{font-size:var(--t-ui)}
.field label,.check,.err-summary-t,.spec dd,.cmp th,.cmp td,.wf-l,.wf-r{font-size:var(--t-ui)}
.chain-h{font-size:var(--t-h4)}

/* measure: paragraphs stop at 40rem (about 70 characters); the heading above may be wider.
   Without this the paragraph in the two-column .split runs about 89 characters. */
.split > .body,.stack > .body,.stack > p.body{max-width:40rem}
.prose{max-width:40rem}

/* the inline font sizes in the markup */
.body[style*="font-size:19px"]{font-size:var(--f-body) !important;line-height:1.6}
.h4[style*="font-size:26px"]{font-size:var(--f-card) !important;line-height:1.2;letter-spacing:-.015em}

/* article */
.prose p{font-size:var(--f-body);line-height:1.7}
.prose p.first{font-size:var(--f-lead);line-height:1.5}
.prose h2{font-size:var(--f-card);line-height:1.25}   /* the margins stay the site's: 28px above, 14px below */

/* ---- labels: ONE system, no label under 12px, every label above a heading 14-16px ---- */
.eyebrow{font-family:var(--mono);font-size:var(--f-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);line-height:1.4;text-transform:uppercase}
.label,.steps .k,.chain-k,.diag-label,.defn-pos,.defn-foot,.wf-l .mono,.spec dt,
.cmp thead th,.wf-head .wf-l,.wf-head .wf-r{font-size:var(--f-label);font-weight:500;letter-spacing:.1em;line-height:1.4}
.wf-l .mono{width:24px;letter-spacing:.04em;font-weight:400}
.spec-row{grid-template-columns:136px minmax(0,1fr)}
.dk-court,.dk-row.th,.dk-agent-head,.tag-their,.arrow{font-size:var(--f-micro);font-weight:500}
.dk-no,.dk-row .n,.dk-row .d{font-size:var(--f-label)}
.dk-row,.dk-steps li{font-size:var(--f-small)}
.cmp,.wf,.dk,.byline,.icard .meta{font-variant-numeric:tabular-nums}
.bg-sage .muted,.bg-sage .meta{color:var(--text-3)}        /* text-4 is 4.13 to 1 on sage; text-3 is 6.71 */
.seal-chips,.chips,.node .sub{font-size:var(--t-caption)}
.seal-text{font-size:1.0625rem}
.seal-env-t{font-size:1.375rem;line-height:1.15}          /* "The sealed environment" */
.seal-node{font-size:1rem}
.defn-term{font-size:var(--f-h3)}
.defn-text{font-size:1.1875rem}
.point-a,.point-b{font-size:var(--f-h2);line-height:1.1;letter-spacing:-.03em}
.point-list{font-size:var(--f-list);line-height:1.25;letter-spacing:-.02em}
.foot-brand{font-size:1.125rem}

@media (min-width:641px){
  .dk-row{grid-template-columns:40px 96px minmax(0,1fr)}   /* date column: a 10-character mono date is 90px at 15px */
}
@media (max-width:1024px){
  /* site.css steps these sizes down at 1024; the fluid sizes above already do it smoothly, so cancel the steps */
  .display,.hero .display{font-size:var(--f-h1)}.h1{font-size:var(--f-h1)}.h2{font-size:var(--f-h2)}
  .point-a,.point-b{font-size:var(--f-h2)}
}
@media (max-width:640px){
  body{font-size:var(--f-body)}
  .display,.hero .display{font-size:var(--f-h1)}.h1{font-size:var(--f-h1)}.h2{font-size:var(--f-h2)}.h3{font-size:var(--f-h3)}
  .point-a,.point-b{font-size:var(--f-h2)}
  .point-list{font-size:var(--f-list)}
  .lead{font-size:var(--f-lead)}
  .prose p{font-size:var(--f-body)}.prose p.first{font-size:var(--f-lead)}
  .eyebrow{letter-spacing:.08em}
  .spec-row{grid-template-columns:minmax(0,1fr)}
}

/* ============ 3. buttons ============
   Primary = .btn-navy, in the action colour. On navy bands the same class turns lime.
   Secondary = .textlink or .btn-ghost (outline, below). Never filled, never the action colour. */
.btn{font-size:var(--t-ui);font-weight:700;letter-spacing:.005em;line-height:1;transition:background-color .15s,box-shadow .15s,transform .1s}
.btn-lg{font-size:1.125rem}
.head-right .btn{font-size:var(--t-ui)}
.btn-navy{background:var(--action);color:var(--on-action)}
.btn-navy:hover{background:var(--action-hover);color:var(--on-action);box-shadow:0 6px 14px rgba(21,29,53,.24)}
.btn-navy:active{background:var(--action-press);color:var(--on-action);box-shadow:none;transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}   /* site.css sets radius 4px on :focus-visible; keep the button's own 10px */

/* dark bands: lime fill, navy label */
.bg-navy .btn-navy,.bg-navy-deep .btn-navy,.on-dark .btn-navy,.site-foot .btn-navy,.btn-lime{background:var(--lime);color:var(--navy-900)}
.bg-navy .btn-navy:hover,.bg-navy-deep .btn-navy:hover,.on-dark .btn-navy:hover,.site-foot .btn-navy:hover,.btn-lime:hover{background:var(--lime-hover);color:var(--navy-900);box-shadow:none}
.bg-navy .btn-navy:active,.bg-navy-deep .btn-navy:active,.on-dark .btn-navy:active,.site-foot .btn-navy:active,.btn-lime:active{background:var(--lime-press);color:var(--navy-900);transform:translateY(1px)}
.bg-navy .btn-navy svg path,.bg-navy-deep .btn-navy svg path,.on-dark .btn-navy svg path,.site-foot .btn-navy svg path,.btn-lime svg path{stroke:var(--navy-900)}   /* the arrow in the markup is drawn lime; on a lime fill it must be navy */
.bg-navy .btn:focus-visible,.bg-navy-deep .btn:focus-visible,.on-dark .btn:focus-visible,.site-foot .btn:focus-visible{outline-color:var(--ring-on-dark)}
.bg-navy a:focus-visible,.bg-navy-deep a:focus-visible,.site-foot a:focus-visible{outline-color:var(--ring-on-dark)}

/* lime band: the action colour stays (indigo on lime is the strongest pairing on the page); ring stays navy */

/* secondary outline button */
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--navy-900)}
.btn-ghost:hover{background:var(--navy-900);color:#fff}
.btn-ghost:active{background:var(--navy-950);color:#fff}
.bg-navy .btn-ghost,.bg-navy-deep .btn-ghost,.on-dark .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px var(--on-navy-3)}
.bg-navy .btn-ghost:hover,.bg-navy-deep .btn-ghost:hover,.on-dark .btn-ghost:hover{background:#fff;color:var(--navy-900);box-shadow:inset 0 0 0 2px #fff}

/* text link used as the secondary action: the underline gets olive (7.7 to 1 on cream) */
.textlink{font-size:var(--f-body);border-bottom-color:var(--olive-700)}
.textlink:hover{border-bottom-color:var(--text)}
.bg-navy .textlink,.bg-navy-deep .textlink{border-bottom-color:var(--on-navy-3)}
.bg-navy .textlink:hover,.bg-navy-deep .textlink:hover{border-bottom-color:var(--lime)}

@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn-navy:active,.btn-lime:active{transform:none}}

/* ============ 4. "The point" (home page) ============
   One column at every width: the statements and the text under them, all on the same left edge as every other
   heading on the page. The first statement names the section (id="point-h"). */
[aria-labelledby="point-h"] .split{grid-template-columns:minmax(0,1fr);gap:24px}
[aria-labelledby="point-h"] .point-a,[aria-labelledby="point-h"] .point-b{max-width:20em}
[aria-labelledby="point-h"] .point-list{max-width:34em}
[aria-labelledby="point-h"] .stack{gap:24px}

/* ============ 5. "The draft, to your firm" (security picture, home page and security page) ============
   The sealed-environment picture ends in a sheet of paper: lime, folded corner, ruled lines for body text,
   a navy badge with a lime check. It is the one solid lime shape in the picture. The arrow lands on its left edge.
   No glow. One soft drop shadow lifts it off the navy panel. The doc icon in the markup is hidden (replaced by the sheet). */
.seal-out{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;
  width:100%;max-width:232px;aspect-ratio:17/22;min-height:0;justify-self:start;align-self:center;margin-block:0;
  padding:22px 22px 26px;border:0;border-radius:8px 0 10px 10px;background:var(--lime);color:var(--navy-900);
  box-shadow:0 16px 32px rgba(16,23,43,.5)}
.seal-out > svg{display:none}
.seal-out > span{display:flex;flex-direction:column;gap:14px;font-size:1.25rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--navy-900)}
.seal-out > span::before{content:"";flex:none;width:26px;height:26px;border-radius:999px;
  background:var(--navy-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.6 3.6 7.4-7.6' fill='none' stroke='%23C6EC7C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
/* ruled lines: body text of the draft, four lines, the last one short */
.seal-out::before{content:"";position:absolute;left:22px;right:22px;bottom:26px;height:36px;
  background:repeating-linear-gradient(to bottom,rgba(21,29,53,.3) 0 3px,transparent 3px 11px);
  clip-path:polygon(0 0,100% 0,100% 30px,58% 30px,58% 100%,0 100%)}
/* folded corner: the top-right 30px square is cut to the panel colour and the flap is a darker lime */
.seal-out::after{content:"";position:absolute;top:0;right:0;width:30px;height:30px;
  background:linear-gradient(to bottom left,var(--navy-900) 50%,#A6C76F 50%);border-bottom-left-radius:4px}

@media (max-width:860px){
  .seal-out{max-width:none;justify-self:stretch;align-self:start;padding:16px 14px 18px;aspect-ratio:17/22}
  .seal-out > span{font-size:1rem;gap:10px}
  .seal-out > span::before{width:22px;height:22px;background-size:15px}
  .seal-out::before{left:14px;right:14px;bottom:18px}
  .seal-out::after{width:24px;height:24px}
}
@media (max-width:640px){
  .seal-env-t{font-size:1.125rem}
}

/* ============ 6. focus ring, label balance and measure ============ */
/* a link on a navy card takes the lime focus ring */
.card-navy a:focus-visible,.card-navy .btn:focus-visible{outline-color:var(--ring-on-dark)}
/* the draft's label breaks into two even lines */
.seal-out > span{text-wrap:balance}
/* the 40rem measure of section 2, for paragraphs whose markup carries its own max-width, the paragraph of a card
   that spans the page, and a step's paragraph */
.body[style*="max-width:44rem"],.body[style*="max-width:46rem"]{max-width:40rem !important}
.card > .body,.steps p{max-width:40rem}