/* Docket Entry law-firm site: layout and colour corrections, by section. The site's own tokens only. */

/* 1. Agentic litigation, the comparison table on a phone: each row restacks, its title on a line of its own across
      the table, the answers under it. The column titles stay as the table's first row. */
@media (max-width:640px){
  .cmp,.cmp thead,.cmp tbody{display:block}
  .cmp tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp thead th:first-child{display:none}
  .cmp tbody th{grid-column:1 / -1;width:auto;border-bottom:0}
}

/* 2. The navy card's link "See the service": white on navy.
   3. The navy card's label: lime, as on the navy bands. */
.card-navy .eyebrow{color:var(--lime)}
.card-navy .textlink{color:var(--white);border-bottom-color:var(--on-navy-3)}
.card-navy .textlink:hover{color:var(--white);border-bottom-color:var(--lime)}

/* 4. The home headline in one column stops at 40px: 30 at 390, 40 at 768 and 1024, 48 at 1440. */
@supports (width:1cqi){
  .display,.hero .display{font-size:clamp(1.875rem,8.4cqi,2.5rem)}
  @media (min-width:1025px){.display,.hero .display{font-size:var(--f-hero)}}
}

/* 5. Line breaks at full width: the three cards' side padding, and the gaps between the seven steps. */
@media (min-width:1200px){
  .grid3 > .card.tight{padding-inline:22px}
  .chain{column-gap:16px;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.12fr) repeat(3,minmax(0,1fr))}
}

/* 7. Short pages: the footer sits at the foot of the window. */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.site-foot{margin-top:auto}

/* 8. The security picture between 641 and 860 wide: the draft's sheet keeps its wide-screen size (232 by 300),
      centred under its arrow. */
@media (max-width:860px){
  .seal-out{max-width:232px;justify-self:center}
}

/* 9. Cookie policy, the providers table up to 900 wide: each row restacks, the first cell on a line of its own
      across the table, the other three side by side under it. The column titles restack the same way. */
@media (max-width:900px){
  .legal-table{min-width:0}
  .legal-table,.legal-table thead,.legal-table tbody{display:block}
  .legal-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr)}
  .legal-table tr > :first-child{grid-column:1 / -1;padding-bottom:0;border-bottom:0}
}

/* 10. Agentic litigation, the comparison table with one answer column. On a phone the answer and its column title
       take the whole row: the title on white, then the answer on navy. From 641 wide: equal columns, 16px 28px in a
       cell and 18px in the head row, the corner white over the stronger rule, a navy rule under the navy column title. */
@media (max-width:640px){
  .cmp thead th:last-child:nth-child(2),.cmp td:only-of-type{grid-column:1 / -1}
  .cmp th,.cmp td{padding:16px 28px}
  .cmp thead th{padding-block:18px}
  .cmp tbody th{padding-block:18px 6px}
}
@media (min-width:641px){
  .cmp{table-layout:fixed}
  .cmp th,.cmp td{padding:16px 28px}
  .cmp thead th{padding-block:18px}
  .cmp thead th:first-child{background:var(--white);border-bottom:1px solid var(--border)}
  .cmp thead th.ours{border-bottom:1px solid var(--navy-line)}
}

/* 11. The phone menu's list under "Capabilities": its links are set in by 20px. */
.mobile-nav a.sub{padding-left:calc(var(--gutter) + 20px)}

/* 12. Home, the first screen. The three sentences under the headline: a line never breaks inside a sentence, so they
       sit on two lines from 641 wide, and on a phone each sentence takes a line of its own. The lead paragraph under
       them is the scale's UI size (16 at 390, 15 at 1440). The line under it wraps as the body text does. */
.hero-three span{white-space:nowrap}
@media (max-width:640px){
  .hero-three span{display:block}
}
.hero-three + .lead{font-size:var(--t-ui)}
.hero .kind-line{text-wrap:pretty}

/* 13. Home, the strip under the first screen. Its label is drawn as a label: no underline, the eyebrow's colour, a
       rule after it. A drawn chevron stands between the four capabilities, which are in case order. "Trial is yours."
       has no underline and stands between two rules straight after the four: it is the one stop that is the lawyer's.
       "Appeal" follows the second rule as a capability link, as "Complaint" follows the first, so the row ends at the
       text column and not at the page edge. The line has no margin of its own: the section's small spacing sets the
       room above and below. Up to 1080 wide the seven take a line each, without the rules and the chevrons, and
       "Trial is yours." stands a step apart from the stops above and below it. */
.case-line{margin:0}
.case-line .case-lead{border-bottom:0;color:var(--olive-700)}
.case-line .case-lead::after,.case-line .case-yours::before{content:"";flex:none;width:1px;height:20px;background:var(--border)}
.case-line .case-lead::after{margin-left:12px}
.case-line .case-yours{border-bottom:0}
.case-line .case-yours::before{margin-right:12px}
.case-line .case-yours::after{content:"";flex:none;width:1px;height:20px;margin-left:12px;background:var(--border)}
.case-line a:not(.case-lead) + a:not(.case-yours){position:relative}
.case-line a:not(.case-lead) + a:not(.case-yours)::before{content:"";position:absolute;left:-15px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:2px solid var(--olive-700);border-right:2px solid var(--olive-700);transform:rotate(45deg)}
.case-line a.case-yours + a:not(.case-lead):not(.case-yours)::before{content:none}
@media (max-width:1080px){
  .case-line{flex-direction:column;align-items:flex-start;gap:4px}
  .case-line .case-lead::after,.case-line .case-yours::before,.case-line a:not(.case-lead) + a:not(.case-yours)::before{content:none}
  .case-line .case-yours{margin-top:12px}
  .case-line .case-yours::after{content:none}
  .case-line .case-yours + a{margin-top:12px}
}

/* 14. Home, the result band: the centre of the page, on navy. The statement takes the section headline's class and
       stands behind a lime rule. The closing line takes the card heading's class under a rule of its own, and its
       second sentence is lime. */
.result .result-say,.result .result-close{max-width:60rem}
.result .result-say{padding-left:28px;border-left:3px solid var(--lime);line-height:1.22}
.result .result-close{padding-top:28px;border-top:1px solid var(--navy-line-2)}
@media (max-width:640px){
  .result .result-say{padding-left:18px}
}

/* 15. Home, the docket card's working panel: its label keeps to one line, so on a phone the line beside it wraps
       and the label does not. */
.dk-agent-head span:first-child{flex:none}

/* 16. Home, the row of four teaser cards: two by two from a tablet up, so every heading keeps to two lines and each
       card's line has room; one column on a phone. */
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:640px){
  .grid4{grid-template-columns:minmax(0,1fr)}
}
/* The life-of-a-case strip runs the full width of the page column, edge to edge like the header. */
@media (min-width:1081px){.case-line.cta-row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:0}}
/* The docket illustration holds its finished size from the first frame. The motion row and the delivered brief keep
   their place while they wait, and fade in where they stand, so nothing on the page moves when they arrive. */
.dk .dk-row.is-hidden{display:grid !important;visibility:hidden;opacity:0}
.dk .dk-done.is-hidden{display:flex !important;visibility:hidden;opacity:0}
.dk .dk-row.fade-in,.dk .dk-done.fade-in{animation:none;transition:opacity .45s ease-out}
@media (prefers-reduced-motion: reduce){.dk .dk-row.fade-in,.dk .dk-done.fade-in{transition:none}}
/* The status label keeps one width whatever it says, so the case name beside it never rewraps. */
.dk-head .pill{flex:none;min-width:12.3em;white-space:nowrap}
/* The docket details in the illustration sit a size down: the sequence under them is the subject. */
.dk .dk-head{padding:16px 24px}
.dk .dk-court,.dk .dk-case,.dk .dk-no,.dk .dk-row,.dk .dk-row .n,.dk .dk-row .d,.dk .dk-row.th,.dk .tag-their{font-size:var(--t-caption);line-height:1.4}
.dk .dk-row{padding:9px 0}