/* Salty Web Co — trade page signatures.
   Each trade page's hero carries one piece only that trade would have (a
   paint wipe, a fence estimator, a breaker panel, a rain toggle), and the
   section after the hero plays the two taps from Google to a call on that
   trade's demo site. Rides on trade.css; the phone itself is flyer/phone.css. */

/* ---- the hero side: the signature replaces the readout ---- */
.sig{position:relative;border:1px solid var(--line-strong);border-radius:18px;background:rgba(10,12,16,.72);
  backdrop-filter:blur(6px);box-shadow:0 30px 70px -30px rgba(0,0,0,.9);overflow:hidden}
.sig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sig-head b{font:600 .7rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.sig-head span{font:500 .68rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sig-body{padding:16px}
.sig-note{padding:10px 16px 14px;font-size:12.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
.sig-note b{color:var(--text)}
.th-side .th-log{margin-bottom:2px}

/* before/after wipe: two copies of one photo, the "before" layer filtered */
.wipe{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#000;--pos:48%;touch-action:pan-y}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wipe .before{filter:sepia(.5) saturate(.5) contrast(.84) brightness(.86)}
.wipe .after{clip-path:inset(0 0 0 var(--pos))}
.wipe--storm .before{filter:saturate(.55) contrast(.9) brightness(.8)}
.wipe .dmg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wipe .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--accent);pointer-events:none}
.wipe .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,.55)}
.wipe input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.wipe input:focus-visible~.bar::after{outline:3px solid #fff;outline-offset:3px}
.wipe .tag{position:absolute;top:12px;font:600 .62rem/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:6px;pointer-events:none}
.wipe .tag--a{left:12px;background:rgba(10,12,16,.82);color:#fff}
.wipe .tag--b{right:12px;background:var(--accent);color:var(--cta-ink)}

/* fence estimator */
.fence-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fence-pick button{font:700 12.5px/1 "Plus Jakarta Sans",sans-serif;color:var(--muted);background:var(--ground-3);border:1px solid var(--line-strong);border-radius:99px;padding:8px 12px;cursor:pointer}
.fence-pick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--cta-ink)}
.fence-draw{display:block;width:100%;height:auto;border-radius:10px;background:linear-gradient(#0F1217,#171B22)}
.fence-row{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;margin-top:12px}
.fence-row label{font:600 .68rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:grid;gap:6px}
.fence-row input[type=range]{width:100%;accent-color:var(--accent)}
.fence-row output{font:800 1.25rem/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.fence-gates{display:inline-flex;align-items:center;gap:8px}
.fence-gates button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:var(--ground-3);color:var(--text);font:700 16px/1 sans-serif;cursor:pointer}
.fence-gates b{font:800 1.1rem/1 "Bricolage Grotesque",sans-serif;min-width:1.2em;text-align:center}
.fence-est{margin-top:14px;padding:14px 16px;border-radius:12px;background:rgba(255,122,26,.1);border:1px solid rgba(255,122,26,.4)}
.fence-est small{display:block;font:600 .66rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.fence-est b{font:800 clamp(1.5rem,2.6vw,1.9rem)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}

/* breaker panel */
.panel{display:grid;gap:14px}
@media(min-width:480px){.panel{grid-template-columns:auto 1fr;align-items:start}}
.brk{display:block;width:min(100%,230px);height:auto;margin:0 auto}
.brk g.b{cursor:pointer}
.brk g.b rect.sw{transition:transform .18s ease;transform-box:fill-box;transform-origin:center}
.brk g.b.on rect.sw{transform:translateX(-14px)}
.brk g.b.on rect.sw{fill:#FF7A1A}
.brk g.b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brk text{font:600 7.5px "IBM Plex Mono",monospace;fill:#B7C0CC;letter-spacing:.04em;pointer-events:none}
.brk g.b.on text{fill:#fff}
.panel-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--ground-3);min-height:120px;display:grid;align-content:start;gap:6px}
.panel-card small{font:600 .66rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.panel-card b{font:800 1.15rem/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:#fff}
.panel-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.panel-card .amp{font:600 .72rem/1 "IBM Plex Mono",monospace;color:var(--silver);padding:5px 8px;border:1px solid var(--line-strong);border-radius:6px;justify-self:start}
.panel-hint{font-size:12.5px;color:var(--dim);text-align:center;margin-top:6px}

/* rain toggle */
.rain-pick{display:flex;gap:6px;margin-bottom:12px}
.rain-pick button{flex:1;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 12px;cursor:pointer}
.rain-pick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--cta-ink)}
.rain{display:block;width:100%;height:auto;border-radius:10px;background:linear-gradient(#0B1420,#121A24 70%,#1A1F26 70%)}
.rain .drop{stroke:#9FC4E8;stroke-width:1.2;stroke-linecap:round;opacity:.55;animation:rain-fall 1s linear infinite}
.rain .drop:nth-child(2n){animation-delay:-.35s}.rain .drop:nth-child(3n){animation-delay:-.7s;opacity:.35}
@keyframes rain-fall{from{transform:translateY(-40px)}to{transform:translateY(90px)}}
.rain .leaf{fill:#8C6A2F}
.rain .flow{fill:none;stroke:#6FB6F0;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7;animation:rain-flow .7s linear infinite}
@keyframes rain-flow{to{stroke-dashoffset:-13}}
.rain .spill{fill:none;stroke:#6FB6F0;stroke-width:2;stroke-linecap:round;stroke-dasharray:4 9;animation:rain-flow .5s linear infinite}
.rain .puddle{fill:#4E90C9;opacity:.75}
.rain .wet{fill:#2B3F55;opacity:.8}
.rain [data-state]{transition:opacity .35s ease}
.rain[data-mode="clean"] [data-state="clogged"],.rain[data-mode="clogged"] [data-state="clean"]{opacity:0}
.rain .lbl{font:600 7px "IBM Plex Mono",monospace;fill:#98A1AC;letter-spacing:.08em}
.rain-read{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;color:var(--muted)}
.rain-read b{color:#fff}
@media(prefers-reduced-motion:reduce){.rain .drop,.rain .flow,.rain .spill{animation:none}}

/* ---- two taps to a call, on this trade's demo ---- */
: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;margin:0;padding:0}
.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)}
.tt .sechead{margin-bottom:0}
.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;margin:0;padding:0}
.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;margin:0;padding:0}
@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}
.tt-wide{margin-top:clamp(36px,5vw,56px)}
.tt-wide .dev{max-width:760px;margin:0 auto}