/* No Effort Rentals: guides, comparisons and tools.
   Same quiet postcard world as the home: mist field, paper bands, slate ink,
   one dusty-blue action. Reading pages are a letter on the back of the card:
   one comfortable column, a ledger for numbers, a receipt for the money. */

/* ---------- article hero ---------- */
.art-hero{padding:clamp(8px,2vw,28px) 0 clamp(48px,6vw,80px)}
.art-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.art-hero.solo .art-hero-grid{grid-template-columns:minmax(0,1fr)}
.art-hero.solo .h1{max-width:20ch}
.crumbs{margin-bottom:clamp(18px,2.4vw,28px);font-size:14.5px;color:var(--ink-2)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"";width:5px;height:5px;margin:0 12px 0 10px;border-top:1.3px solid var(--sage);border-right:1.3px solid var(--sage);transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.crumbs a:hover{color:var(--ink);text-decoration-color:var(--coral)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.art-hero .h1{max-width:18ch}
.art-hero .lede{margin-top:22px;max-width:40em}
.art-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:22px;font-size:14px;color:var(--ink-2);font-variant-numeric:lining-nums}
.art-meta span + span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--sage);vertical-align:middle;margin:0 14px 2px -10px}
.art-hero .hero-actions{margin-top:30px}

/* ---------- the slip: a receipt or a postcard back that sums the page up ---------- */
.slip{position:relative;background:#fff;border-top:6px solid var(--blue);padding:26px 26px 22px;box-shadow:0 30px 50px -28px rgba(31,45,58,.5),0 3px 10px -4px rgba(31,45,58,.18);transform:rotate(1.6deg);font-size:15px;line-height:1.35;max-width:430px;justify-self:end;width:100%;animation:lay .8s cubic-bezier(.22,1,.36,1) both .3s}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.slip-head span:first-child{font:700 11.5px/1.2 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.slip-head span:last-child{font-size:13px;color:var(--ink-2);text-align:right}
.slip dl{margin:0;display:grid;gap:9px}
.slip dl div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.slip dt{color:var(--ink-2)}
.slip dd{margin:0;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--ink);font-weight:500}
.slip .s-us{margin:4px -10px 0;padding:9px 10px;background:#e4ece8;border-radius:4px}
.slip .s-us dt{color:var(--ink);font-weight:600}
.slip .s-us dd{font-weight:700}
.slip .s-fee{margin:2px -10px;padding:8px 10px;background:#f6e2da;border-radius:4px}
.slip .s-fee dt,.slip .s-fee dd{color:var(--coral-ink);font-weight:700}
.slip .s-total{margin-top:6px;padding-top:12px;border-top:1px dashed #b8c4bf;font-weight:700}
.slip .s-total dd{font-size:21px;letter-spacing:-.01em}
.slip-foot{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.slip.is-card{border-top:0;background:var(--paper);background-image:var(--grain);transform:rotate(-1.2deg);box-shadow:var(--shadow);padding:22px 24px 24px}
.slip.is-card .back-head{font-size:11px;margin-bottom:14px;text-align:left;letter-spacing:.38em}
.slip.is-card ul{display:grid;gap:10px}
.slip.is-card li{position:relative;padding-left:24px;color:var(--ink);font-size:15.5px;line-height:1.5}
.slip.is-card li::before{content:"";position:absolute;left:2px;top:.6em;width:10px;height:5px;border-left:1.5px solid var(--sage-deep);border-bottom:1.5px solid var(--sage-deep);transform:rotate(-45deg)}
@media (max-width:900px){
  .art-hero-grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .slip{justify-self:start;transform:rotate(-.6deg);max-width:520px}
  .slip.is-card{transform:rotate(-.6deg)}
}
@media (prefers-reduced-motion:reduce){.slip{animation:printed .4s ease-out both}}

/* ---------- article body + side index ---------- */
.art{padding:clamp(24px,3vw,48px) 0 clamp(72px,9vw,120px)}
.art.art-after{padding-top:clamp(48px,6vw,88px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(40px,6vw,96px);align-items:start}
.toc{position:sticky;top:28px;font-size:14.5px;order:2}
.toc p{font:600 13px/1.3 var(--text);letter-spacing:.06em;color:var(--ink);margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.4}
.toc a:hover{color:var(--ink);border-left-color:var(--sage)}
.toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--coral-ink);font-weight:500}
.toc .toc-cta{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.toc .toc-cta .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;margin:0;border-left:0;font:500 16px/1.2 var(--text);letter-spacing:.01em;width:100%;color:var(--paper);text-align:center}
.toc .toc-cta .btn:hover{color:var(--paper);border-left:0}
.toc .toc-cta .note{font:400 13.5px/1.5 var(--text);letter-spacing:0;color:var(--ink-2);margin:0}
@media (max-width:980px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:0;padding:16px 18px;background:var(--paper);border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
  .toc .toc-cta{display:none}
}

/* ---------- prose ---------- */
.prose{max-width:68ch;color:var(--ink);font-size:17.5px;line-height:1.75}
.prose > * + *{margin-top:1.05em}
.prose h2{font:400 clamp(28px,3vw,36px)/1.15 var(--display);letter-spacing:-.005em;margin-top:clamp(56px,6vw,76px);text-wrap:balance;scroll-margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose h3{font:600 19.5px/1.35 var(--text);margin-top:2em;scroll-margin-top:24px}
.prose h2 + p,.prose h3 + p{margin-top:.7em}
.prose p{text-wrap:pretty}
.prose a:not(.btn){font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--coral)}
.prose a:not(.btn):hover{text-decoration-color:currentColor}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding:0;display:grid;gap:.5em}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--sage)}
.prose ol{list-style:none;counter-reset:n}
.prose ol li{position:relative;padding-left:40px;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.05em;font:400 22px/1.2 var(--display);color:var(--coral-ink);font-variant-numeric:lining-nums}
.prose .checks li::before{width:11px;height:6px;border-radius:0;background:none;border-left:1.5px solid var(--sage-deep);border-bottom:1.5px solid var(--sage-deep);transform:rotate(-45deg);top:.6em;left:2px}
.prose .lead{font-size:clamp(19px,1.8vw,21px);line-height:1.6;color:var(--ink)}
.prose .aside{font-size:15.5px;color:var(--ink-2);line-height:1.65}
.prose hr{border:0;border-top:1px solid var(--line);margin:clamp(44px,5vw,64px) 0}

/* a short note kept in the margin of the letter */
.memo-note{padding:20px 22px;background:var(--paper);background-image:var(--grain);border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);font-size:16px;line-height:1.65;color:var(--ink)}
.memo-note b{font-weight:600}
.memo-note p + p{margin-top:.6em}
.memo-note .caps{display:block;margin-bottom:10px;font-size:11px}

/* ---------- the ledger: comparison tables ---------- */
.ledger-wrap{margin-top:1.6em;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:4px;box-shadow:0 18px 40px -30px rgba(31,45,58,.4),inset 0 0 0 1px var(--line);scrollbar-color:var(--sage) transparent}
.prose .ledger-wrap{max-width:none}
.ledger{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px;line-height:1.45;font-variant-numeric:tabular-nums lining-nums}
.ledger caption{caption-side:bottom;text-align:left;padding:12px 18px 14px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line)}
.ledger th,.ledger td{padding:13px 18px;text-align:left;vertical-align:top;border-top:1px solid #e3e9e6}
.ledger thead th{border-top:0;padding-top:16px;padding-bottom:12px;font:600 12px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:var(--paper)}
.ledger thead th.us{color:var(--blue)}
.ledger tbody th{font-weight:600;color:var(--ink);width:30%}
.ledger td{color:var(--ink-2)}
.ledger td.us{color:var(--ink);background:#f3f7f5}
.ledger td .yes,.ledger td .no,.ledger td .part{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
.ledger .yes{background:var(--sage-deep)}
.ledger .no{box-shadow:inset 0 0 0 1.5px #9aa9a2}
.ledger .part{background:linear-gradient(90deg,var(--sage-deep) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--sage-deep)}
.ledger.narrow{min-width:0}
@media (max-width:640px){
  .ledger.narrow{font-size:14px}
  .ledger.narrow th,.ledger.narrow td{padding:11px 10px}
  .ledger.narrow tbody th{position:static;box-shadow:none;width:31%}
  .ledger.narrow thead th{letter-spacing:.08em}
  .ledger{font-size:14.5px}
  .ledger th,.ledger td{padding:12px 14px}
  .ledger tbody th{position:sticky;left:0;background:#fff;box-shadow:1px 0 0 #e3e9e6;z-index:1}
}

/* ---------- two sides of the card: where they win, where we fit ---------- */
.two-sides{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:1.8em;padding:28px 30px 30px;background:var(--paper);background-image:var(--grain);border-radius:4px;box-shadow:var(--shadow);max-width:none}
.two-sides::before{content:"";position:absolute;left:50%;top:30px;bottom:30px;border-left:1px solid var(--line)}
.two-sides h3{margin:0 0 12px;font:400 23px/1.25 var(--display)}
.two-sides ul{display:grid;gap:9px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.two-sides li{position:relative;padding-left:22px}
.two-sides li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--sage)}
.two-sides > div:last-child li::before{width:10px;height:5px;border-radius:0;background:none;border-left:1.5px solid var(--sage-deep);border-bottom:1.5px solid var(--sage-deep);transform:rotate(-45deg);top:.55em}
@media (max-width:720px){.two-sides{grid-template-columns:1fr;gap:26px 0;padding:24px}.two-sides::before{display:none}.two-sides > div + div{padding-top:24px;border-top:1px dashed var(--line)}}

/* ---------- questions inside an article ---------- */
.prose .faq{display:grid;gap:26px;margin-top:1.4em}
.prose .faq h3{margin:0 0 6px;font:400 22px/1.3 var(--display)}
.prose .faq p{color:var(--ink-2);margin:0}

/* ---------- sources ---------- */
.sources{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.sources h2{font:600 15px/1.3 var(--text)!important;letter-spacing:.02em;margin:0 0 10px!important;color:var(--ink)}
.sources ol{display:grid;gap:6px;list-style:decimal;padding-left:22px!important}
.sources ol li{padding-left:4px!important}
.sources ol li::before{content:none!important}
.sources a{word-break:break-word;font-weight:400!important}

/* ---------- closing postcard: one action ---------- */
.closing{padding:0 0 clamp(72px,9vw,120px)}
.close-card{--pad:clamp(24px,3.4vw,48px);--gap:clamp(36px,5vw,72px);position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 var(--gap);padding:var(--pad)}
.close-card::before{content:"";position:absolute;left:calc(var(--pad) + (100% - 2 * var(--pad) - var(--gap)) * 1.3 / 2.3 + var(--gap) / 2);top:var(--pad);bottom:var(--pad);border-left:1px solid var(--line)}
.close-card .back-head{grid-column:1/-1;text-align:left;font-size:11.5px;margin-bottom:20px}
.close-msg h2{font:400 clamp(30px,3.4vw,42px)/1.12 var(--display);text-wrap:balance;max-width:16ch}
.close-msg p{margin-top:14px;color:var(--ink-2);max-width:44ch}
.close-msg .hero-actions{margin-top:26px}
.close-addr{display:grid;align-content:space-between;gap:22px}
.close-addr .stamp{--holes:var(--paper);width:132px;justify-self:end;color:var(--paper);box-shadow:0 0 0 1px var(--line)}
.close-addr .stamp-in{display:grid;gap:4px;place-content:center;text-align:center;aspect-ratio:4/5;padding:10px 6px;background:var(--blue);border-color:var(--paper);border-width:2px}
.close-addr .stamp small{font:500 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.close-addr .stamp b{font:400 34px/1 var(--display);white-space:nowrap}
.close-addr .stamp span{font:500 11px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase}
.close-addr .line{border-bottom:1px solid var(--line);padding:10px 0 6px;font-weight:500}
.close-addr .line + .line{color:var(--ink-2);font-weight:400}
@media (max-width:820px){.close-card{grid-template-columns:1fr}.close-card::before{display:none}.close-addr{margin-top:28px;padding-top:24px;border-top:1px dashed var(--line);grid-template-columns:1fr auto;align-items:end}.close-addr .stamp{order:2;width:104px}.close-addr .stamp b{font-size:26px}}

/* ---------- hubs: the index of pages ---------- */
.hub{padding:clamp(40px,5vw,64px) 0 clamp(72px,9vw,120px)}
.hub .res-list + .h2{margin-top:clamp(64px,8vw,96px)}
.hub .h2{margin-bottom:clamp(24px,3vw,36px)}

/* ---------- the calculator ---------- */
.calc{padding:clamp(8px,2vw,24px) 0 clamp(64px,8vw,104px)}
.calc-grid{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.calc-form{position:sticky;top:20px;padding:26px 24px 24px;display:grid;gap:18px}
.calc-form .back-head{text-align:left;font-size:11px;margin-bottom:0;letter-spacing:.38em}
.calc-form .field input,.calc-form .field select{font-variant-numeric:tabular-nums lining-nums}
.calc-form .field .hint{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.money{position:relative}
.money .cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-2);font-weight:500;pointer-events:none}
.money input{padding-left:32px!important}
.money.after .cur{left:auto;right:14px}
.money.after input{padding-left:14px!important;padding-right:34px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:6px;box-shadow:inset 0 0 0 1px #c5d0cb;padding:3px;background:#fff}
.seg{position:relative}
.seg input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:4px;font:500 14.5px/1.2 var(--text);color:var(--ink-2);cursor:pointer;text-align:center;padding:4px 8px}
.seg input:checked + label{background:var(--ink);color:var(--paper)}
.seg input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px}
.calc-form .fine{font-size:13px;line-height:1.5;color:var(--ink-2)}
.calc-out h2{font:400 clamp(26px,2.8vw,34px)/1.15 var(--display);margin-bottom:8px;text-wrap:balance}
.calc-out .sum{color:var(--ink-2);max-width:56ch}
.calc-out .sum b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.receipts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 20px;margin-top:28px}
.receipts .slip{transform:none;max-width:none;justify-self:stretch;animation:none;padding:20px 20px 18px;font-size:14.5px;border-top-color:#9aa9a2}
.receipts .slip:nth-child(odd){transform:rotate(-.5deg)}
.receipts .slip:nth-child(even){transform:rotate(.5deg)}
.receipts .slip.direct{border-top-color:var(--blue);background:#fff;box-shadow:0 30px 50px -26px rgba(31,45,58,.5),0 0 0 1.5px var(--blue)}
.receipts .slip-head span:first-child{color:var(--ink)}
.receipts .slip.direct .slip-head span:first-child{color:var(--blue)}
.receipts .keep{display:block;margin-top:12px;font:400 30px/1 var(--display);color:var(--ink);font-variant-numeric:lining-nums}
.receipts .keep small{display:block;margin-top:6px;font:400 13px/1.3 var(--text);color:var(--ink-2)}
.year{margin-top:clamp(36px,4vw,52px)}
.year h3{font:400 clamp(23px,2.3vw,28px)/1.2 var(--display);margin-bottom:12px}
.bars{display:grid;gap:12px;margin-top:16px}
.bar{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) auto;align-items:center;gap:14px;font-size:15px}
.bar .lbl{color:var(--ink)}
.bar .track{height:14px;background:#e3e9e6;border-radius:2px;overflow:hidden}
.bar .fill{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--s,0));background:#9aa9a2;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bar.direct .fill{background:var(--blue)}
.bar .amt{font-variant-numeric:tabular-nums lining-nums;font-weight:600;min-width:7ch;text-align:right}
@media (max-width:560px){.bar{grid-template-columns:1fr auto}.bar .track{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:reduce){.bar .fill{transition:none}}
@media (max-width:900px){.calc-grid{grid-template-columns:minmax(0,1fr)}.calc-form{position:static}}

/* ---------- 404 ---------- */
.lost{padding:clamp(24px,5vw,72px) 0 clamp(80px,10vw,140px)}
.lost-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(36px,6vw,96px);align-items:center}
.lost .lede{margin:22px 0 30px}
.lost .res-list{margin-top:8px}
.lost-card{position:relative;container-type:inline-size;transform:rotate(1.6deg);max-width:440px;justify-self:end;width:100%}
.lost-card .postcard{aspect-ratio:3/2}
.lost-card .back{grid-template-columns:1.3fr 1fr;grid-template-rows:auto 1fr}
.lost-card .back-addr{padding-top:24cqw}
.lost-card .back-addr .stamp{width:14cqw}
.lost-card .back-msg .script{font-size:6.4cqw}
.lost-card .back-addr .line s{color:var(--ink-2);text-decoration-color:var(--coral-ink);text-decoration-thickness:1.5px}
.lost-card .rts{position:absolute;left:6%;bottom:9%;margin:0;transform:rotate(-7deg);padding:1.6cqw 2.8cqw;border:2px solid var(--coral-ink);border-radius:3px;color:var(--coral-ink);font:700 3.4cqw/1 var(--text);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;opacity:.85;mix-blend-mode:multiply}
@media (max-width:860px){.lost-grid{grid-template-columns:1fr}.lost-card{justify-self:start;transform:rotate(-.8deg)}}