/* Free tools (/tools, /tools/{slug}). Builds on site.css tokens; logical properties only (RTL page).
   Layout order (PopupSnap pattern): breadcrumb, H1, the tool, results, bridge, explanation, how-to,
   examples, reading, FAQ, related, final CTA, phone sticky bar. */

/* ===================== PAGE + HERO ===================== */
.tool-hero{position:relative;padding-top:clamp(24px,12px + 3vw,48px);padding-bottom:clamp(40px,24px + 4vw,72px);isolation:isolate}
.tool-hero::before{content:"";position:absolute;inset:0 0 auto;height:520px;z-index:-1;background:radial-gradient(60% 70% at 50% 0,var(--s-bg-glow),transparent 70%);pointer-events:none}
@media (max-width:1023.98px){.tool-hero{padding-top:88px}} /* the phone header is the floating edge tab */
.tool-hero__h1{font-size:var(--fs-h1);font-weight:var(--fw-heavy);line-height:var(--lh-tight);text-wrap:balance;max-width:960px;margin-block:var(--sp-4) var(--sp-8)}

.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--t-3)}
.crumbs li{display:inline-flex;align-items:center;gap:var(--sp-2)}
.crumbs li+li::before{content:"/";color:var(--s-line-strong)}
.crumbs a{color:var(--t-2);text-decoration:none}
.crumbs a:hover{color:var(--mint);text-decoration:underline}
.crumbs [aria-current]{color:var(--t-1)}

/* Numbers next to Arabic units ("154 ر.س", "39 يوم") must read right to left, so .num keeps its
   tabular figures but follows the page direction here. Signed values (+100%, -23%) use .num--ltr. */
.tool-page .num{direction:rtl}
.tool-page .num--ltr{direction:ltr}

/* ===================== TOOL CARD (inputs) ===================== */
.tool-ui{display:grid;gap:var(--sp-5);padding:clamp(20px,12px + 2vw,32px);border-radius:var(--r-xl);background:var(--s-surface);border:1px solid var(--s-line);box-shadow:var(--sh-card)}
.tool-fields{display:grid;gap:var(--sp-4)}
@media (min-width:640px){.tool-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tool-fields{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.field{display:grid;gap:var(--sp-2);align-content:start;min-width:0}
.field[hidden],[data-panel][hidden]{display:none}
.field--wide{grid-column:1/-1}
.field label,.seg__legend{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--t-1);line-height:var(--lh-snug)}
.field__opt{font-weight:var(--fw-regular);color:var(--t-3)}
.field__err{min-height:0;font-size:var(--fs-xs);color:var(--amber);line-height:var(--lh-snug)}
.field__err:empty{display:none}
.field--inline{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3)}
/* Phones: label above the select so long options ("شاملة الضريبة (15%)") are not cut. */
@media (max-width:559.98px){.field--inline{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}}

.input{width:100%;min-height:48px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--s-line-strong);background:var(--s-bg);color:var(--t-1);font:inherit;font-size:1rem;line-height:var(--lh-ui);transition:border-color var(--d-fast) var(--ease)}
.input::placeholder{color:var(--t-3)}
.input:hover{border-color:var(--t-3)}
.input:focus-visible{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-soft)}
.input[aria-invalid=true]{border-color:var(--amber)}
.input--area{min-height:140px;resize:vertical;line-height:1.6;font-feature-settings:"tnum" 1}
.input--file{padding:10px;cursor:pointer}
.input--file::file-selector-button{margin-inline-end:12px;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--s-line-strong);background:var(--s-surface-2);color:var(--t-1);font:inherit;font-size:var(--fs-sm);cursor:pointer}
select.input{appearance:none;padding-inline-end:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;cursor:pointer}
input[type=date].input{direction:ltr;text-align:end;color-scheme:dark}

/* Segmented switch (radios) */
.seg{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;border:0;min-width:0}
.seg__legend{width:100%;padding:0;margin-bottom:var(--sp-2)}
.seg__opt{position:relative;display:inline-flex}
.seg__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg__opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--s-line-strong);color:var(--t-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap;transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.seg__opt:hover span{border-color:var(--t-2);color:var(--t-1)}
.seg__opt input:checked+span{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.seg__opt input:focus-visible+span{box-shadow:var(--ring)}
.seg--small .seg__opt span{min-height:40px;padding:0 14px}
@media (max-width:479.98px){.seg__opt span{padding:0 12px;white-space:normal;text-align:center;line-height:1.3}}

.tool-options{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);align-items:end}
.tool-options--top{align-items:start}
@media (max-width:559.98px){.tool-options{display:grid;gap:var(--sp-4)}}
.tool-hint{font-size:var(--fs-sm);color:var(--t-3);line-height:1.6}
.tool-hint--lead{font-size:var(--fs-body);color:var(--t-2)}
.tool-more{border-top:1px solid var(--s-line);padding-top:var(--sp-4)}
.tool-more summary{cursor:pointer;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--mint);list-style:none;border-radius:var(--r-sm)}
.tool-more summary::-webkit-details-marker{display:none}
.tool-more summary::before{content:"+";display:inline-block;width:1.2em}
.tool-more[open] summary::before{content:"−"}
.tool-more[open] summary{margin-bottom:var(--sp-4)}
.tool-more .tool-hint{margin-top:var(--sp-3)}
.tool-disclaimer{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:rgba(255,201,120,.08);border:1px solid rgba(255,201,120,.28);font-size:var(--fs-sm);color:var(--t-2);line-height:1.7}
.tool-disclaimer a{color:var(--mint);font-weight:var(--fw-bold)}

/* ===================== RESULTS ===================== */
.tool-results{margin-top:var(--sp-5);display:grid;gap:var(--sp-5)}
.tool-results>[hidden]{display:none}
.tool-results__empty{padding:var(--sp-6);border-radius:var(--r-xl);border:1px dashed var(--s-line-strong);color:var(--t-3);text-align:center}
.tool-results [data-out-panel]{display:grid;gap:var(--sp-5)}
.tool-results [data-out-panel][hidden]{display:none}
.res-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.res{display:grid;gap:var(--sp-1);align-content:start;padding:var(--sp-5);border-radius:var(--r-lg);background:var(--s-card);border:1px solid var(--s-line)}
.res[hidden]{display:none}
.res__label{font-size:var(--fs-sm);color:var(--t-3);line-height:var(--lh-snug)}
.res__value{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:var(--fw-heavy);line-height:1.2;color:var(--t-1);justify-self:start}
.res__sub{font-size:var(--fs-sm);color:var(--t-2);line-height:var(--lh-snug)}
.res--main{background:linear-gradient(160deg,rgba(180,241,232,.14),rgba(180,241,232,.04));border-color:var(--mint-line)}
.res--main .res__value{color:var(--mint);font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.res-vat{font-size:var(--fs-sm);color:var(--t-2)}

.price-card{display:grid;gap:var(--sp-2);padding:var(--sp-6);border-radius:var(--r-xl);background:var(--s-card);border:1px solid var(--mint-line)}
.price-card__label{font-size:var(--fs-sm);color:var(--t-3)}
.price-card__now{font-size:clamp(2rem,1.5rem + 2vw,3rem);font-weight:var(--fw-heavy);color:var(--mint);line-height:1.1;justify-self:start}
.price-card__was{color:var(--t-3);text-decoration:line-through;justify-self:start}
.price-card__badge{justify-self:start;padding:4px 10px;border-radius:var(--r-pill);background:var(--mint);color:var(--mint-ink);font-size:var(--fs-xs);font-weight:var(--fw-heavy)}

.verdict{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--s-line);background:var(--s-card);color:var(--t-1);font-weight:var(--fw-medium);line-height:1.7}
.verdict--ok{border-color:rgba(107,203,90,.45);background:rgba(107,203,90,.08)}
.verdict--warn{border-color:rgba(255,201,120,.45);background:rgba(255,201,120,.08)}
.verdict--bad{border-color:rgba(255,120,120,.5);background:rgba(255,120,120,.08)}

/* Wide tables scroll inside .table-wrap (a focusable region, so keyboards can scroll it too).
   Scroll shadows: the "local" covers travel with the content and hide the "scroll" glows once an
   edge is reached, so a glow on either side means there is more table that way. */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--s-line);-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--s-bg) 30%,transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--s-bg) 30%,transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(180,241,232,.28),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(180,241,232,.28),transparent) right center/14px 100% no-repeat scroll,
    var(--s-bg)}
.tool-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.5}
.tool-table caption{caption-side:top;text-align:start;padding:var(--sp-3) var(--sp-4);color:var(--t-3)}
.tool-table th,.tool-table td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--s-line);vertical-align:top}
.tool-table thead th{background:var(--s-surface-2);color:var(--t-2);font-weight:var(--fw-bold);white-space:nowrap}
.tool-table tbody th{font-weight:var(--fw-bold);color:var(--t-1)}
.tool-table tbody tr:last-child>*{border-bottom:0}
.tool-table td.num,.tool-table th.num{text-align:end;white-space:nowrap}
.tool-table .is-bad,.tool-table tr.is-bad>*{color:#FF9B9B}
.tool-table--grid td,.tool-table--grid th{text-align:center}
.tool-table--nowrap td,.tool-table--nowrap th{white-space:nowrap}
/* Phones: tighter cells, and drop the columns that repeat what is already visible.
   Discount list: "#" (same order as typed) and "يوفّر العميل" (before minus after).
   CSV preview: the line number column; the status column wraps instead of widening the table.
   Permit plan: the offer number (rows follow the offers above); dates wrap between the two dates. */
@media (max-width:559.98px){
  .tool-table th,.tool-table td{padding:10px 8px}
  .tool-table--multi tr>:nth-child(1),.tool-table--multi tr>:nth-child(4),.tool-table--preview tr>:nth-child(1),.tool-table--plan tr>:nth-child(1){display:none}
  .tool-table--preview tr>:nth-child(5){white-space:normal;min-width:7.5em}
  .tool-table--plan td,.tool-table--plan thead th{white-space:normal}
  .tool-table--grid thead th:first-child{white-space:normal;min-width:6.5em}
}
@media (max-width:379.98px){.tool-table th,.tool-table td{padding-inline:6px}}

/* ===================== RESULT PEEK (phones) =====================
   Headline result right under the inputs (partials/peek.blade.php). In the page flow on purpose:
   a fixed bar would sit over the inputs once the keyboard opens and fight the WhatsApp button and
   the sticky install bar for the bottom edge. */
.result-peek{display:none}
.tool-results:focus{outline:none}
@media (max-width:767.98px){
  .result-peek{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--sp-3);min-height:56px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--mint-line);background:linear-gradient(160deg,rgba(180,241,232,.14),rgba(180,241,232,.04));color:var(--t-1);text-decoration:none}
  .result-peek[hidden]{display:none}
  .result-peek__label{grid-column:1;font-size:var(--fs-sm);color:var(--t-2);line-height:var(--lh-snug)}
  .result-peek__value{grid-column:1;justify-self:start;font-size:1.375rem;font-weight:var(--fw-heavy);line-height:1.2;color:var(--mint)}
  .result-peek__go{grid-column:2;grid-row:1/span 2;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--mint);white-space:nowrap}
  .result-peek--bad{border-color:rgba(255,201,120,.45);background:rgba(255,201,120,.07)}
  .result-peek--bad .result-peek__value{color:var(--amber)}
}

/* ===================== PERMIT PLANNER ===================== */
.permit-rows{display:grid;gap:var(--sp-4)}
.permit-row{position:relative;margin:0;padding:var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--s-line);background:var(--s-bg);min-width:0}
.permit-row__n{padding:0 var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--mint)}
.tool-fields--row{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.permit-row__del{position:absolute;top:8px;inset-inline-end:8px;min-height:36px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--s-line);background:transparent;color:var(--t-3);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.permit-row__del:hover{color:var(--t-1);border-color:var(--t-3)}
.permit-row__del[hidden]{display:none}
.permit-add{justify-self:start}
.permit-add[hidden]{display:none}
.permit-warn{display:grid;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);border:1px solid rgba(255,201,120,.4);background:rgba(255,201,120,.07);font-size:var(--fs-sm);line-height:1.7;color:var(--t-1)}
.permit-warn[hidden]{display:none}
.permit-warn li{position:relative;padding-inline-start:18px}
.permit-warn li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.permit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.permit-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.permit-check{padding:var(--sp-5);border-radius:var(--r-xl);border:1px solid var(--s-line);background:var(--s-surface)}
.permit-check__title{font-size:var(--fs-h3);font-weight:var(--fw-bold);margin-bottom:var(--sp-3)}
.permit-check__list{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.permit-check__list label{display:flex;gap:var(--sp-3);align-items:flex-start;cursor:pointer;line-height:1.6}
.permit-check__list input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--mint)}

/* ===================== SEASON CALENDAR ===================== */
.season-next{display:grid;gap:var(--sp-3);padding:clamp(20px,12px + 2vw,32px);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(180,241,232,.14),rgba(180,241,232,.03));border:1px solid var(--mint-line)}
.season-next__eyebrow{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--t-2);margin-bottom:var(--sp-1)}
.season-next__name{font-size:var(--fs-h2);font-weight:var(--fw-heavy);line-height:var(--lh-tight)}
.season-next__date{color:var(--t-1);font-weight:var(--fw-bold)}
.season-next__range,.season-next__hijri{color:var(--t-2);font-weight:var(--fw-regular)}
.season-next__prep{color:var(--t-2)}
.countdown{display:flex;gap:var(--sp-3);direction:rtl}
.countdown__cell{display:grid;justify-items:center;min-width:84px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--s-card);border:1px solid var(--s-line)}
.countdown__n{font-size:var(--fs-stat);font-weight:var(--fw-heavy);line-height:1.1;color:var(--mint)}
.countdown__u{font-size:var(--fs-sm);color:var(--t-3)}
@media (max-width:479.98px){.countdown__cell{min-width:0;flex:1;padding:var(--sp-3) var(--sp-2)}}
.season-now{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:rgba(107,203,90,.1);border:1px solid rgba(107,203,90,.35);font-weight:var(--fw-bold)}
.season-list__title{font-size:var(--fs-h3);font-weight:var(--fw-bold);margin-top:var(--sp-2)}
.season-list{display:grid;gap:var(--sp-3)}
.season-item{display:grid;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);background:var(--s-card);border:1px solid var(--s-line);border-inline-start:4px solid var(--s-line-strong)}
.season-item[hidden]{display:none}
.season-item--national{border-inline-start-color:var(--dot)}
.season-item--religious{border-inline-start-color:var(--amber)}
.season-item--shopping{border-inline-start-color:var(--mint)}
.season-item.is-now{background:linear-gradient(160deg,rgba(107,203,90,.1),var(--s-card))}
@media (min-width:768px){.season-item{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.season-item__name{font-size:1.125rem;font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.season-item__date{color:var(--t-2);font-size:var(--fs-sm)}
.season-item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-xs)}
.season-item__disc{color:var(--t-2)}
.season-item__note{margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--t-3)}
.season-item__side{display:grid;gap:2px;text-align:start}
@media (min-width:768px){.season-item__side{text-align:end;justify-items:end}}
.season-item__left{font-weight:var(--fw-heavy);font-size:1.125rem;color:var(--mint)}
.season-item.is-now .season-item__left{color:var(--dot)}
.season-item__prep{font-size:var(--fs-xs);color:var(--t-3)}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--s-surface-2);color:var(--t-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);white-space:nowrap;vertical-align:middle}
.badge--expected{background:transparent;border:1px dashed var(--s-line-strong);color:var(--amber)}

/* ===================== BRIDGE CTA ===================== */
.tool-section{padding-block:clamp(40px,24px + 4vw,80px)}
.tool-bridge-wrap{padding-top:0}
.tool-bridge{display:grid;gap:var(--sp-6);padding:clamp(24px,16px + 2vw,40px);border-radius:var(--r-2xl);border:1px solid var(--mint-line);background:radial-gradient(80% 120% at 100% 0,rgba(180,241,232,.12),transparent 60%),var(--s-card)}
@media (min-width:1024px){.tool-bridge{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}}
.tool-bridge__title{font-size:var(--fs-h3);font-weight:var(--fw-heavy);line-height:var(--lh-snug);margin-bottom:var(--sp-2)}
.tool-bridge__text{color:var(--t-2);line-height:1.8}
.tool-bridge__cta{display:grid;gap:var(--sp-3);justify-items:start}
.tool-bridge__btns{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.tool-bridge__more{color:var(--mint);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none}
.tool-bridge__more:hover{text-decoration:underline}
/* Phones: the two install buttons stack full width; each button keeps its own flex row (logo, label, arrow). */
@media (max-width:767.98px){.tool-bridge__cta,.tool-bridge__btns{display:grid;width:100%;justify-items:stretch}.tool-bridge__btns{gap:var(--sp-3)}}

/* ===================== LONG-FORM CONTENT ===================== */
.tool-h2{font-size:var(--fs-h2);font-weight:var(--fw-heavy);line-height:var(--lh-tight);text-wrap:balance;margin-bottom:var(--sp-6)}
.tool-prose{max-width:calc(var(--w-text) + 2*var(--gutter) + 160px)}
.tool-narrow{max-width:calc(880px + 2*var(--gutter))}
.tool-prose>*+*{margin-top:var(--sp-4)}
.tool-prose h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug);margin-top:var(--sp-8)}
.tool-prose p,.tool-prose li{color:var(--t-2)}
.tool-prose strong{color:var(--t-1)}
.tool-prose a,.tool-faq__a a{color:var(--mint);text-underline-offset:3px}
.tool-prose ul:not([class]),.tool-prose ol:not([class]),.tool-prose__steps,.tool-sources{display:grid;gap:var(--sp-2);padding-inline-start:1.4em}
.tool-prose ul:not([class]),.tool-sources{list-style:disc}
.tool-prose ol:not([class]),.tool-prose__steps{list-style:decimal}
.tool-prose li::marker{color:var(--mint)}
.formula-list{display:grid;gap:var(--sp-2);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--s-card);border:1px solid var(--s-line)}
.formula-list li{position:relative;padding-inline-start:20px;line-height:1.8}
.formula-list li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:8px;height:8px;border-radius:2px;background:var(--mint)}
.examples{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.example{padding:var(--sp-5);border-radius:var(--r-lg);background:var(--s-card);border:1px solid var(--s-line)}
.example h3{font-size:1.0625rem;font-weight:var(--fw-bold);margin:0 0 var(--sp-2)}
.example p,.example li{color:var(--t-2);line-height:1.8}
.example ol{list-style:decimal;padding-inline-start:1.4em;margin-top:var(--sp-2)}
.example strong{color:var(--mint)}

.tool-steps{display:grid;gap:var(--sp-4)}
@media (min-width:768px){.tool-steps{grid-template-columns:repeat(3,1fr)}}
.tool-step{display:grid;gap:var(--sp-2);align-content:start;padding:var(--sp-6);border-radius:var(--r-xl);background:var(--s-card);border:1px solid var(--s-line)}
.tool-step__n{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--mint);color:var(--mint-ink);font-weight:var(--fw-heavy);margin-bottom:var(--sp-2)}
.tool-step__title{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.tool-step__text{color:var(--t-2)}

.tool-reading{display:grid;border-top:1px solid var(--s-line)}
.tool-reading li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);border-bottom:1px solid var(--s-line)}
.tool-reading a{flex:1;padding-block:16px;color:var(--t-1);font-weight:var(--fw-bold);text-decoration:none;line-height:var(--lh-snug)}
.tool-reading a:hover{color:var(--mint)}
.tool-reading__arrow{width:16px;height:16px;color:var(--t-3);flex:none}

.tool-faq{border-top:1px solid var(--s-line)}
.tool-faq__q{font-size:1.125rem;font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.tool-faq__item summary:hover .tool-faq__q{color:var(--mint)}
.tool-faq__chev{width:16px;height:16px;color:var(--t-3);flex:none;transition:transform var(--d-base) var(--ease)}
.tool-faq__item[open] .tool-faq__chev{transform:rotate(180deg)}
.tool-faq__a{padding-bottom:var(--sp-5);color:var(--t-2);max-width:var(--w-text);display:grid;gap:var(--sp-2)}
.tool-faq__link a{font-weight:var(--fw-bold);text-decoration:none}
.tool-faq__link a:hover{text-decoration:underline}
@media (max-width:767.98px){.tool-faq__q{font-size:1.0625rem}}

/* ===================== CARDS (related + hub) ===================== */
.tool-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.tool-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border-radius:var(--r-xl);background:var(--s-card);border:1px solid var(--s-line);transition:border-color var(--d-base) var(--ease),transform var(--d-base) var(--ease)}
.tool-card:hover{border-color:var(--mint-line);transform:translateY(-2px)}
.tool-card:focus-within{box-shadow:var(--ring)}
.tool-card__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--mint-soft);color:var(--mint)}
.tool-card__icon svg{width:22px;height:22px}
.tool-card__name{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.tool-card__name a{text-decoration:none}
.tool-card__name a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tool-card__name a:focus-visible{box-shadow:none}
.tool-card__desc{color:var(--t-2);font-size:var(--fs-sm);line-height:1.7}
.tool-card__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--mint);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.tool-card__go svg{width:14px;height:14px}
.tool-all{margin-top:var(--sp-8);display:flex;justify-content:center}

.tools-hub__intro{max-width:760px;margin-top:calc(-1*var(--sp-4));margin-bottom:var(--sp-10);font-size:var(--fs-lead);color:var(--t-2)}
.tools-hub__home{margin-top:var(--sp-10);color:var(--t-3)}
.tools-hub__home a{color:var(--mint)}

/* The final CTA band follows the tool sections directly. */
.tool-page .final{padding-top:clamp(24px,12px + 3vw,48px)}