/* Please Call Me SA site styles. Source: _src/chrome.css, copied to assets/site.css by _src/build.py.
   Direction A "The Code": one centred column, a dark "screen" panel holds each page's signature interaction. */
:root{
  --bg:#F2F0F7; --panel:#FFFFFF; --ink:#170F2C; --muted:#5C5470; --line:#DAD4E7;
  --blue:#1B3CD1; --magenta:#A73989; --plum:#3D0A30; --on-accent:#FFFFFF;
  --screen:#170F2C; --screen-ink:#E9E4F7; --screen-dim:#8C83A8; --screen-line:#3A3152; --screen-hi:#221A38;
  --code-pre:#9FB0FF; --code-hash:#F09AD8;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F0B1A; --panel:#181226; --ink:#EEEAF8; --muted:#A79FBE; --line:#2C2440;
  --blue:#8C9DFF; --magenta:#E480C9; --plum:#F3B8E2; --on-accent:#0F0B1A;
  --screen:#05030A; --screen-ink:#E9E4F7; --screen-dim:#8C83A8; --screen-line:#2C2440; --screen-hi:#1A1328; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F0B1A; --panel:#181226; --ink:#EEEAF8; --muted:#A79FBE; --line:#2C2440;
  --blue:#8C9DFF; --magenta:#E480C9; --plum:#F3B8E2; --on-accent:#0F0B1A;
  --screen:#05030A; --screen-ink:#E9E4F7; --screen-dim:#8C83A8; --screen-line:#2C2440; --screen-hi:#1A1328; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 18px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:34px;height:auto;flex:0 0 auto}
nav.links{display:flex;gap:22px;margin-left:auto;font:500 15px/1 var(--body)}
nav.links a{text-decoration:none;color:var(--muted);padding-block:6px;border-bottom:2px solid transparent}
nav.links a:hover{color:var(--ink)}
nav.links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--magenta)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);text-decoration:none;padding:12px 18px;border-radius:999px;background:var(--blue);color:var(--on-accent);border:0;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn .short{display:none}
@media (max-width:820px){nav.links{display:none}.bar .btn{margin-left:auto}}
@media (max-width:480px){.btn .long{display:none}.btn .short{display:inline}.brand{font-size:16px}}

.eyebrow{font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--magenta)}
h1{font:800 clamp(40px,6vw,76px)/.98 var(--display);font-variation-settings:"wdth" 82;letter-spacing:-.025em;margin:14px 0 0;max-width:16ch;text-wrap:balance}
h2{font:750 clamp(30px,4vw,50px)/1.02 var(--display);font-variation-settings:"wdth" 84;letter-spacing:-.02em;margin:10px 0 0;max-width:20ch;text-wrap:balance}
h3{font:700 22px/1.2 var(--display);margin:0}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:56ch;margin:20px 0 0}
.page-head{padding-block:64px 36px}
.section{padding-block:72px 8px}
.screen{background:var(--screen);color:var(--screen-ink);border-radius:22px;padding:clamp(20px,3.4vw,36px)}
.screen-top{display:flex;justify-content:space-between;gap:12px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--screen-dim)}
.code{font-family:var(--mono);font-weight:600}
.code .pre{color:var(--code-pre)}.code .hash{color:var(--code-hash)}
.caret{display:inline-block;width:.08em;height:.9em;background:currentColor;vertical-align:-.08em;margin-left:.04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
ul.bul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
ul.bul li{display:flex;gap:12px}
ul.bul li::before{content:"";flex:0 0 10px;height:10px;margin-top:9px;background:var(--blue);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}

.dialstrip{margin-top:88px}
.dialstrip .screen{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.dialstrip .q{font:700 22px/1.2 var(--display)}
.dialstrip .ds-code{font:600 clamp(20px,3vw,30px)/1 var(--mono)}
.dialstrip input{font:500 17px/1 var(--mono);background:transparent;color:#fff;border:1px solid var(--screen-line);border-radius:12px;padding:11px 13px;width:min(210px,100%)}
.dialstrip input:focus{outline:none;border-color:var(--code-pre)}
.dialstrip a{color:var(--code-pre);font:500 14px/1 var(--mono)}

footer.site{margin-top:72px;border-top:1px solid var(--line);padding-block:48px 56px}
.foot-grid{display:grid;gap:32px}
@media (min-width:800px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
footer.site h4{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--blue)}
.maker{font-size:15px;color:var(--muted);max-width:40ch;margin:0 0 8px}
.maker b{color:var(--ink)}
.mail{font:500 15px/1.4 var(--mono);user-select:all;margin:0}
.legal{grid-column:1/-1;font:500 12px/1.5 var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:20px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dialstrip select{font:500 15px/1 var(--mono);background:transparent;color:var(--screen-ink);border:1px solid var(--screen-line);border-radius:12px;padding:11px 10px}
.dialstrip select option{color:#170F2C}
.mail a{text-decoration:none}

/* Ads: hand-placed slots only (assets/ads.js). Height is reserved so nothing jumps.
   Until an AdSense unit fills a slot, it shows a house card for the app or a tool. */
.ad-slot{position:relative;margin-block:48px 0;min-height:250px;border-radius:18px;overflow:hidden;display:grid}
.ad-label{position:absolute;top:8px;right:12px;z-index:2;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ad-slot ins.adsbygoogle{display:block;grid-area:1/1;z-index:1;background:var(--bg)}
.ad-house{grid-area:1/1;display:grid;gap:14px;align-content:center;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px clamp(20px,4vw,40px)}
@media (min-width:760px){.ad-house{grid-template-columns:1.1fr 1fr;align-items:center}}
.ad-house .hc{background:var(--screen);color:var(--screen-ink);border-radius:14px;padding:18px 20px;font:600 clamp(20px,3vw,30px)/1.1 var(--mono);white-space:nowrap;overflow:hidden}
.ad-house .hc small{display:block;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--screen-dim);margin-bottom:10px}
.ad-house b{display:block;font:750 clamp(22px,2.6vw,30px)/1.1 var(--display);font-variation-settings:"wdth" 86}
.ad-house span.l{display:block;color:var(--muted);margin-top:6px}
.ad-house span.c{display:inline-block;margin-top:14px;font:600 15px/1 var(--body);background:var(--blue);color:var(--on-accent);padding:11px 16px;border-radius:999px}
.ad-preview::after{content:attr(data-ad);position:absolute;left:12px;top:8px;z-index:3;font:500 10px/1 var(--mono);color:var(--magenta);text-transform:uppercase;letter-spacing:.1em}