/* /install only. The one-week install: the week is the spine, the records are the proof.
   Loads after tokens, tape, site and shell. Every length is a multiple of --u. */

/* ---------- Head: the title, its label strip, and the shelf it will fill ---------- */
.ins-head{padding:var(--s-16) 0 var(--s-16)}
.ins-head__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-16);align-items:center}
.ins-head__title{margin:0 0 var(--s-4);font:500 var(--t-4xl)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.ins-head__title .nb{white-space:nowrap}
/* The label strip stuck under the title. One tape, block wrapper so it fragments cleanly. */
.ins-head__strip{margin:0 0 var(--s-8);line-height:0}
.ins-head__strip .tape{font-size:round(down,clamp(20px,2.2vw,28px),4px);line-height:calc(1em + var(--s-5))}
.ins-head__lede{max-width:32em;margin:0 0 var(--s-4);font:400 var(--t-lg)/var(--lh-lede) var(--font-text);color:var(--ink)}
.ins-head__body{max-width:36em;color:var(--ink-2)}
.ins-head__price{margin-top:var(--s-8)}
.ins-head .actions{margin-top:var(--s-6)}
.ins-head__plate{--ar:.75;--px:.5;--py:1;aspect-ratio:.78}
.ins-head__plate,.week__plate{border-radius:var(--r-card)}
.ins-head__plate .plate__label .tape{font-size:calc(var(--u) * 3.5);line-height:calc(var(--u) * 5)}
@media (max-width:959px){
  .ins-head{padding:var(--s-10) 0 var(--s-12)}
  .ins-head__grid{grid-template-columns:1fr;gap:var(--s-10)}
  .ins-head__plate{aspect-ratio:.85;max-width:30rem;margin-inline:auto}
}
.ins-head__plate .ins-label--phone{--x:var(--xd)}
.ins-head__plate .ins-label--server{--y:var(--yd)}
@media (max-width:599px){
  .ins-head__plate .ins-label--phone{--x:var(--xm)}
  .ins-head__plate .ins-label--server{--y:var(--ym)}
}
@media (max-width:599px){
  .ins-head__lede{font-size:var(--t-md);line-height:var(--lh-body)}
  .ins-head__strip .tape{font-size:calc(var(--u) * 4);line-height:calc(var(--u) * 9)}
}

/* ---------- On this page: a row of white tape tabs on a shelf edge ---------- */
.ins-toc{background:var(--shelf);border-block:1px solid var(--rule);box-shadow:var(--shelf-cast)}
.ins-toc ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);margin:0;padding:var(--s-2) 0;list-style:none}
.ins-toc li:first-child{margin-right:var(--s-2);font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.ins-toc a{display:inline-flex;align-items:center;min-height:var(--tap-min);text-decoration:none}
.ins-toc a .tape{transition:translate var(--dur-1) var(--ease-out)}
.ins-toc a:hover .tape{translate:0 -2px}
@media (max-width:599px){
  .ins-toc ul{flex-wrap:wrap;gap:var(--s-2) var(--s-3);padding-block:var(--s-3)}
  .ins-toc li:first-child{display:none}
}

/* Inline links outside paragraphs get a taller hit area without moving the line. */
.board dd a,.compare caption a{padding-block:var(--s-3)}
/* ---------- Shared bits ---------- */
.ins-note{max-width:var(--measure);margin:var(--s-8) 0 0;font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-ui);color:var(--ink-2)}
.ins-note time{font-weight:600;color:var(--ink)}
.ins-h3{margin:var(--s-12) 0 var(--s-4);font:500 var(--t-2xl)/1.12 var(--font-display);letter-spacing:-.015em}
.ins-h3:first-child{margin-top:0}
.ins-src{font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
.ins-src a{color:var(--ink-2)}

/* The week: longer day entries than home, so a little more air per day. */
.ins-week .week__day p + p{margin-top:var(--s-3)}
.ins-week .week__day p{font-size:var(--t-md);line-height:var(--lh-body)}

/* ---------- Checked list with drawn boxes ---------- */
.ins-ticks{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ins-ticks li{position:relative;padding:var(--s-3) 0 var(--s-3) var(--s-10);border-bottom:1px solid var(--rule);font:400 var(--t-md)/var(--lh-ui-lg) var(--font-ui);color:var(--ink)}
.ins-ticks li::before{content:"";position:absolute;left:var(--s-1);top:calc(var(--s-3) + 2px);width:18px;height:18px;border:1.5px solid var(--ink);border-radius:1px;background:var(--card)}

/* ---------- Records: card stock with ruled lines you fill in ---------- */
.record{position:relative;margin:0;padding:var(--s-8) var(--s-8) var(--s-6);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-3)}
.record__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-6);padding-bottom:var(--s-4);border-bottom:2px solid var(--ink);line-height:1}
.record__head .tape{display:inline-block}
.record__meta{font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
.record dl{margin:0;padding:0}
.record__row{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);gap:var(--s-1) var(--s-4);align-items:end;padding:var(--s-3) 0}
.record__row dt{margin:0;font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.record__row dd{margin:0;min-height:var(--s-6);padding-bottom:var(--s-1);border-bottom:1px solid var(--rule-strong);font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-text);color:var(--ink)}
.record__row dd .tape{display:inline-block;margin-bottom:var(--s-1);padding:0 calc(var(--u) * 2.5);font-size:calc(var(--u) * 3.5);line-height:calc(var(--u) * 7);white-space:nowrap}
.record__foot{margin:var(--s-6) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
@media (max-width:599px){
  .record{padding:var(--s-6) var(--s-5) var(--s-5)}
  .record__row{grid-template-columns:1fr}
}

/* ---------- Split with a record on the right ---------- */
.ins-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-16);align-items:start}
.ins-split > .record{margin-top:var(--s-4)}
@media (max-width:959px){.ins-split{grid-template-columns:1fr;gap:var(--s-10)}}

/* ---------- Steps inside a section (the restore test, the exit plan) ---------- */
.ins-steps{max-width:var(--measure);margin:var(--s-6) 0 0}
.ins-steps > li p{margin:0}

/* ---------- Own or rent: a ruled comparison ---------- */
.compare{width:100%;max-width:960px;margin:var(--s-6) 0 0;background:var(--card);box-shadow:var(--lift-1);font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-ui)}
.compare caption{caption-side:bottom;padding:var(--s-3) 0 0;text-align:left;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
.compare th,.compare td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.compare thead th{border-bottom:2px solid var(--ink);line-height:1}
.compare thead .tape{display:inline-block}
.compare tbody th{font-weight:600;color:var(--ink);width:26%}
.compare td{color:var(--ink-2)}
.compare tbody tr:last-child > *{border-bottom:0}
@media (max-width:699px){
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare tbody tr{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule)}
  .compare tbody th,.compare td{padding:var(--s-1) 0;border:0}
  .compare td::before{content:attr(data-col) ": ";font-weight:600;color:var(--ink)}
  .compare caption{display:block;padding:var(--s-3) var(--s-4)}
  .compare tbody th{width:auto}
}

/* ---------- Hardware: a supplier price is never our price ---------- */
.supplier{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-6);align-items:start;max-width:var(--measure);margin:var(--s-6) 0 0;padding:var(--s-5) var(--s-6);background:var(--wall);border:1px dashed var(--rule-strong);border-radius:var(--r-card)}
.supplier .price{grid-row:span 2}
.supplier p{margin:0;font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-2)}
.supplier .price{flex-wrap:wrap}
@media (max-width:599px){.supplier{grid-template-columns:1fr}.supplier .price{grid-row:auto}}

/* ---------- The price plate ---------- */
.ins-price{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-12);align-items:start}
.ins-price__tag .price .tape--m{font-size:calc(var(--u) * 8);line-height:calc(var(--u) * 14)}
.ins-price__tag .requote{font-size:var(--t-sm)}
.ins-price__tag .prose{margin-top:var(--s-8)}
.ins-price__tag .prose p{font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink)}
@media (max-width:959px){.ins-price{grid-template-columns:1fr;gap:var(--s-8)}}

/* ---------- Five minute check ---------- */
.fit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;margin:0 0 var(--s-10);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.fit fieldset{padding:var(--s-6) var(--s-8)}
.fit__out{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6) var(--s-8);border-left:1px dashed var(--rule-strong);background:var(--shelf)}
.fit__out > .tape{align-self:flex-start;display:inline-block}
.fit__verdict{display:block;min-height:3.3em;font:500 var(--t-2xl)/1.1 var(--font-display);color:var(--ink);text-wrap:balance}
.fit__rule{margin:0;padding:0;list-style:none;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.fit__rule li + li{margin-top:var(--s-2)}
.fit__rule b{color:var(--ink)}
@media (max-width:767px){.fit{grid-template-columns:1fr}.fit fieldset,.fit__out{padding:var(--s-5)}.fit__out{border-left:0;border-top:1px dashed var(--rule-strong)}.fit__verdict{min-height:0}}

/* ---------- Two columns of plain lists ---------- */
.ins-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);margin:var(--s-8) 0 0}
.ins-cols h3{margin:0 0 var(--s-4);font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui)}
.ins-cols ul{margin:0;padding-left:1.2em}
.ins-cols li + li{margin-top:var(--s-2)}
@media (max-width:767px){.ins-cols{grid-template-columns:1fr;gap:var(--s-8)}}

/* ---------- Twelve questions before you sign ---------- */
.ins-sign{max-width:var(--wrap-narrow);margin:var(--s-10) 0 0;background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-1)}
.ins-sign > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--s-16);padding:var(--s-4) var(--s-6);font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui);cursor:pointer;list-style:none}
.ins-sign > summary::-webkit-details-marker{display:none}
.ins-sign > summary::after{content:"";flex:none;width:16px;height:16px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:rotate var(--dur-2) var(--ease-out)}
.ins-sign[open] > summary::after{rotate:180deg}
.ins-sign > summary:hover{text-decoration:underline;text-underline-offset:.25em}
.ins-sign > summary:focus-visible{box-shadow:var(--focus-ring)}
.ins-sign > div{padding:0 var(--s-6) var(--s-6)}
.ins-sign ol{margin:0;padding-left:1.6em;font-variant-numeric:tabular-nums}
.ins-sign li{padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.ins-sign li:last-child{border-bottom:0}

/* ---------- Tools: what the week installs, said plainly ---------- */
.ins-tools{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-16);align-items:start;margin:var(--s-16) 0 0;padding:var(--s-10) 0 0;border-top:2px solid var(--ink)}
.ins-tools .ins-h3{margin-top:0}
.scope{margin:0;padding:var(--s-6);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.scope > div{padding:var(--s-4) 0;border-bottom:1px solid var(--rule)}
.scope > div:first-child{padding-top:0}
.scope > div:last-child{padding-bottom:0;border-bottom:0}
.scope dt{margin:0 0 var(--s-2);font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.scope dd{margin:0;font:400 var(--t-md)/var(--lh-ui-lg) var(--font-ui);color:var(--ink)}
.scope dd .tape{display:inline-block}
@media (max-width:959px){.ins-tools{grid-template-columns:1fr;gap:var(--s-8)}}

/* The approval slip beside prose: a narrower key column so tapes stay on one line. */
.ins-split .slip li{grid-template-columns:6em minmax(0,1fr)}
@media (max-width:599px){.ins-split .slip li{grid-template-columns:1fr}}

/* ---------- Close: ask for the written quote ---------- */
.ins-quote .close__title{max-width:12em}
.ins-quote__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-12);align-items:start;margin-top:var(--s-10)}
.ins-quote__ask p{max-width:36em;color:var(--ink-2)}
.ins-quote__ask .actions{margin-top:var(--s-6)}
.ins-copy{padding:0;border:0;background:none;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.ins-copy:hover{text-decoration-thickness:2px}
.ins-copy::after{display:none}
.ins-pay{padding:var(--s-6);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.ins-pay h3{margin:0 0 var(--s-4);font:600 var(--t-lg)/var(--lh-ui-lg) var(--font-ui)}
.ins-pay p{font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-2)}
.ins-pay .tape--button{margin:var(--s-4) 0 var(--s-2)}
.ins-return{max-width:var(--measure);margin:var(--s-8) 0 0;padding:var(--s-4) var(--s-5);background:var(--card);box-shadow:var(--lift-1);font:400 var(--t-md)/var(--lh-body) var(--font-text)}
.ins-return[hidden]{display:none}
@media (max-width:959px){.ins-quote__grid{grid-template-columns:1fr;gap:var(--s-8)}}

@media (forced-colors:active){.record,.fit,.ins-pay,.compare,.ins-sign{border:1px solid CanvasText}}