/* Salty Web Co — the guide pages (cost guide, comparisons). Rides on trade.css,
   towns.css and site-footer.css; this only adds what a guide needs that the
   trade and town pages don't: the short-answer card, comparison tables and
   the two-sided "when it fits" cards. */

/* hero: headline left, the short answer right — the answer is the point */
.gh .hero-in{align-items:start}
@media(min-width:960px){.gh .hero-in{grid-template-columns:1fr 1fr;gap:56px}}
.gh .lede{margin-bottom:22px}
.upd{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:18px}
.ans{background:var(--ground-3);border:1px solid rgba(255,122,26,.32);border-radius:18px;padding:26px 26px 24px;position:relative}
.ans::before{content:"";position:absolute;left:26px;top:-1px;width:64px;height:3px;background:var(--accent);border-radius:0 0 3px 3px}
.ans h2{font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ans p{font-size:16.5px;line-height:1.66}
.ans p+p{margin-top:12px}
.ans b{color:var(--accent-hot)}

/* tables: scroll sideways inside their own box on a phone, never the page */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--ground-2)}
.tbl table{width:100%;min-width:680px;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 16px;border-top:1px solid var(--line)}
.tbl thead th{border-top:0;font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);background:var(--ground-3)}
.tbl tbody th{font-weight:800;color:var(--text);width:22%}
.tbl td{color:var(--muted)}
.tbl td b{color:var(--text)}
.tbl .us{background:rgba(255,122,26,.07);color:var(--text)}
.tbl thead .us{color:var(--accent)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-note{font-size:13.5px;color:var(--dim);margin-top:12px;max-width:80ch}
.tbl-note a{color:var(--muted)}

/* two sides of an honest comparison */
.sides{display:grid;gap:18px}
@media(min-width:860px){.sides{grid-template-columns:1fr 1fr}}
.side{background:var(--ground-2);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px}
.side--us{border-color:rgba(255,122,26,.32)}
.side h3{font-size:19px;margin-bottom:12px}
.side ul{list-style:none;display:grid;gap:10px}
.side li{position:relative;padding-left:22px;color:var(--muted);font-size:15.5px;line-height:1.55}
.side li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.side--us li::before{background:var(--accent)}
.side li b{color:var(--text)}

/* the prose bits between the tables */
.prose{max-width:68ch;display:grid;gap:14px;color:var(--muted)}
.prose b{color:var(--text)}
.prose a{color:var(--accent-hot)}
.sum{margin-top:22px;font-size:16.5px;color:var(--text);max-width:70ch}
.sum a{color:var(--accent-hot)}

/* ---- see the difference: two phones, numbered pins, notes underneath ---- */
.vs{display:grid;gap:28px;align-items:start}
@media(min-width:860px){.vs{grid-template-columns:1fr auto 1fr;gap:34px}}
.vs-ph{margin:0;display:grid;gap:16px;justify-items:center}
.vs-shot{position:relative;width:min(100%,300px);border-radius:30px;padding:9px;background:#05060a;
  border:1px solid var(--line-strong);box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.vs-shot img{width:100%;height:auto;border-radius:22px;display:block}
.vs-ph--us .vs-shot{border-color:rgba(255,122,26,.55);box-shadow:0 30px 70px -26px rgba(255,122,26,.35)}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font:800 13px/1 "Plus Jakarta Sans",sans-serif;background:#2a2d33;color:#fff;
  border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.vs-ph--us .pin{background:var(--accent);color:var(--cta-ink)}
.vs-ph figcaption{text-align:center}
.vs-ph figcaption b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;letter-spacing:-.02em}
.vs-ph figcaption span{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.vs-ph--us figcaption span{color:var(--accent)}
.vs-notes{list-style:none;counter-reset:n;display:grid;gap:10px;width:min(100%,420px)}
.vs-notes li{counter-increment:n;position:relative;padding-left:36px;font-size:15px;line-height:1.5;color:var(--muted)}
.vs-notes li::before{content:counter(n);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font:800 12px/1 "Plus Jakarta Sans",sans-serif;background:#2a2d33;color:#fff}
.vs-ph--us .vs-notes li::before{background:var(--accent);color:var(--cta-ink)}
.vs-notes b{color:var(--text)}
.vs-mid{align-self:center;justify-self:center;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.8rem;letter-spacing:.2em;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:10px 14px}
.vs-cred{margin-top:26px;font-size:13.5px;color:var(--dim);max-width:80ch}
.vs-cred a{color:var(--muted)}

/* ---- drag one into the other ---- */
.sl-wrap{margin-top:clamp(40px,5vw,64px);display:grid;gap:14px;justify-items:center;text-align:center}
.sl-wrap h3{font-size:22px}
.sl-wrap p{color:var(--muted);font-size:15px;max-width:52ch}
.sl{--pos:50%;position:relative;width:min(100%,320px);border-radius:30px;padding:9px;background:#05060a;border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9);touch-action:pan-y}
.sl-in{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:360/779}
.sl-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sl-us{clip-path:inset(0 0 0 var(--pos))}
.sl-bar{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--accent);pointer-events:none}
.sl-bar::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160A02' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.sl input:focus-visible~.sl-bar::after{outline:3px solid #fff;outline-offset:3px}
.sl-tag{position:absolute;top:18px;font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 8px;border-radius:6px;pointer-events:none}
.sl-tag--a{left:18px;background:rgba(20,22,26,.85);color:#fff}
.sl-tag--b{right:18px;background:var(--accent);color:var(--cta-ink)}

/* ---- the payback calculator ---- */
.roi{display:grid;gap:22px}
@media(min-width:900px){.roi{grid-template-columns:1fr 1fr;gap:34px;align-items:start}}
.roi-in{background:var(--ground-3);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:16px}
.roi-in label{display:grid;gap:7px;font-weight:700;font-size:14.5px}
.roi-in label small{font-weight:500;color:var(--dim);font-size:13px}
.roi-in input,.roi-in select{width:100%;font:600 17px/1.2 "Plus Jakarta Sans",sans-serif;color:var(--text);background:var(--ground);
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 13px;font-variant-numeric:tabular-nums}
.roi-in input:focus,.roi-in select:focus{border-color:var(--accent);outline:none}
.roi-two{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.roi-out{background:linear-gradient(160deg,rgba(255,122,26,.12),var(--ground-2) 60%);border:1px solid rgba(255,122,26,.35);border-radius:18px;padding:26px}
.roi-big{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,44px);line-height:1.05;letter-spacing:-.03em}
.roi-big em{font-style:normal;color:var(--accent)}
.roi-rows{margin-top:18px;display:grid;gap:0}
.roi-rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.roi-rows dd{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.roi-rows .tot dd{color:var(--accent-hot)}
.roi-fine{margin-top:14px;font-size:13px;color:var(--dim)}
.proof{margin-top:clamp(28px,4vw,40px);display:grid;gap:10px;max-width:760px;border-left:3px solid var(--accent);padding:4px 0 4px 20px}
.proof blockquote{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--text);margin:0}
.proof cite{font-style:normal;font-size:14px;color:var(--muted)}
.proof cite a{color:var(--accent-hot)}

/* ---- two taps to a call, and the setup behind it ---- */
:root{--fire:#FF7A1A}
.tt{display:grid;gap:clamp(30px,4vw,56px);align-items:center}
@media(min-width:900px){.tt{grid-template-columns:auto 1fr}}
.tt-stage{display:grid;justify-items:center;gap:16px}
.tt-phone{width:min(280px,72vw)}
.tt-beats{display:flex;justify-content:center;gap:8px;list-style:none;flex-wrap:wrap}
.tt-beats li{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:99px;border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:all .3s var(--ease)}
.tt-beats i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 "IBM Plex Mono",monospace;font-style:normal;border:1px solid var(--line-strong)}
.tt-beats li.on{color:var(--text);border-color:rgba(255,122,26,.6);background:rgba(255,122,26,.09)}
.tt-beats li.on i{background:var(--accent);color:var(--cta-ink);border-color:var(--accent)}
.tt-beats li.done{color:var(--silver);border-color:var(--line-strong)}
.tt-beats li.done i{background:var(--silver);color:#0C1013;border-color:var(--silver)}
.tt-again{font:700 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--muted);background:none;border:1px solid var(--line);border-radius:99px;padding:9px 14px;cursor:pointer}
.tt-again:hover{color:var(--text);border-color:var(--line-strong)}
.paths{display:grid;gap:12px;margin:22px 0 26px}
.path{display:grid;gap:8px}
.path b{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.path ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.path li{font-size:13.5px;font-weight:700;padding:7px 11px;border-radius:8px;background:var(--ground-3);border:1px solid var(--line);color:var(--muted)}
.path li+li::before{content:"\2192";margin:0 6px 0 -2px;color:var(--dim);font-weight:400}
.path--us b{color:var(--accent)}
.path--us li{background:rgba(255,122,26,.1);border-color:rgba(255,122,26,.4);color:var(--text)}
.path--us li:last-child{background:var(--accent);color:var(--cta-ink);border-color:var(--accent)}
.conv{list-style:none;display:grid;gap:14px}
@media(min-width:620px){.conv{grid-template-columns:1fr 1fr}}
.conv li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.conv svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.conv b{display:block;font-size:15.5px;color:var(--text);margin-bottom:2px}
.conv span{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ---- one request, many contractors: the shared-lead picture ---- */
.fan{display:grid;gap:20px}
@media(min-width:860px){.fan{grid-template-columns:1fr 1fr;gap:28px}}
.fan-col{background:var(--ground-2);border:1px solid var(--line);border-radius:18px;padding:24px 22px;display:grid;gap:0;justify-items:center;text-align:center}
.fan-col--us{border-color:rgba(255,122,26,.4);background:linear-gradient(170deg,rgba(255,122,26,.08),var(--ground-2) 55%)}
.fan-col h3{font-size:19px;margin-bottom:16px}
.fan-node{border:1px solid var(--line-strong);border-radius:12px;padding:10px 14px;font-weight:700;font-size:14.5px;background:var(--ground-3);max-width:260px}
.fan-node small{display:block;font-weight:500;color:var(--dim);font-size:12.5px;margin-top:2px}
.fan-hub{border-color:var(--line-strong);font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.fan-col--us .fan-hub{border-color:var(--accent);color:var(--accent)}
.fan-line{width:2px;height:22px;background:var(--line-strong)}
.fan-col--us .fan-line{background:var(--accent)}
.fan-to{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:16px;margin-top:0;border-top:2px solid var(--line-strong);width:min(100%,420px)}
.fan-col--us .fan-to{border-top-color:transparent;padding-top:0}
.fan-to li{font-size:13.5px;font-weight:700;padding:8px 11px;border-radius:10px;background:var(--ground-3);border:1px solid var(--line);color:var(--muted)}
.fan-to li small{display:block;font-weight:600;font-size:11.5px;color:var(--dim)}
.fan-to li.you{border-color:var(--accent);color:var(--text)}
.fan-col--us .fan-to li.you{background:var(--accent);color:var(--cta-ink)}
.fan-col--us .fan-to li.you small{color:var(--cta-ink);opacity:.75}
.fan-col p{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:40ch}
.fan-col p b{color:var(--text)}

/* ---- one phone, several views (case studies) ---- */
.vs-shot video{width:100%;height:auto;aspect-ratio:390/844;border-radius:22px;display:block;background:#000;object-fit:cover}
.vs-shot[data-view]:not([data-view="mid"]) .pin{display:none}
.vs-views{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vs-views button{font:700 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--muted);background:var(--ground-3);border:1px solid var(--line-strong);
  border-radius:99px;padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.vs-views button svg{width:12px;height:12px;fill:currentColor}
.vs-views button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--cta-ink)}
.film{border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);background:#000;max-width:960px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* ---- where the numbers come from ---- */
.srcs{display:grid;gap:10px;max-width:80ch;padding-left:22px;color:var(--dim);font-size:14.5px}
.srcs a{color:var(--muted);text-underline-offset:3px}
.srcs a:hover{color:var(--accent-hot)}
.tbl th a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:3px}

/* ---- calls to action inside the page, where the case is plainest ---- */
.cta-band{margin-top:clamp(26px,3.5vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  padding:20px 22px;border-radius:16px;border:1px solid rgba(255,122,26,.4);background:linear-gradient(120deg,rgba(255,122,26,.12),var(--ground-2) 70%)}
.cta-band b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:21px;letter-spacing:-.02em}
.cta-band span{color:var(--muted);font-size:15px}
.roi-cta{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.roi-cta span{font-size:13.5px;color:var(--muted)}

/* ---- websites by trade, under "keep reading" ---- */
.trade-row{margin-top:clamp(28px,4vw,40px);display:grid;gap:12px}
.trade-row b{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchips a{font-size:14px;font-weight:700;text-decoration:none;color:var(--text);padding:8px 13px;border-radius:99px;border:1px solid var(--line-strong);background:var(--ground-2)}
.tchips a:hover,.tchips a:focus-visible{border-color:var(--accent);color:var(--accent-hot)}
.trade-row p{font-size:14.5px;color:var(--muted)}
.trade-row p a{color:var(--accent-hot)}