/* TradeExclusives shared stylesheet. Every page links this one file.
   Colours and fonts live in :root. Change them here and every page follows.
   Upload to the site root as /tradeexclusives.css and bump ?v= on the link tags after edits. */

:root{
  --panel:#e8ecef;      /* switchboard grey */
  --paper:#f7f8f9;
  --ink:#0e2233;        /* deep conduit blue */
  --neutral:#1f5fbf;    /* neutral-wire blue */
  --earth-g:#2e9b4f;    /* earth green, used for "available" */
  --warn:#ffd60a;       /* THE yellow, same as webfixgary.net hi-vis. Strip, logo, buttons. */
  --warn-ink:#12161a;   /* the black in the warning strip, same as webfixgary.net */
  --line:#c5ced6;
  --muted:#51616f;
  --bad:#b3261e;
  --head:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--panel);color:var(--ink);line-height:1.55;font-size:1.0625rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--neutral);font-weight:600}
[hidden]{display:none!important}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.strip{height:16px;background:repeating-linear-gradient(-45deg,var(--warn) 0 14px,var(--warn-ink) 14px 28px)}

/* header */
header{background:var(--paper);border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;padding-bottom:1rem;gap:1rem}
.logo{font-family:var(--head);font-weight:800;font-size:1.6rem;letter-spacing:.01em}
.logo b{background:var(--warn);color:var(--warn-ink);font-weight:800;padding:0 .3em;margin-left:.15em;border-radius:3px}
.tag{color:var(--muted);font-size:.95rem}

/* hero */
.hero{display:grid;gap:2.5rem;padding:3rem 0 3.5rem}
h1{font-family:var(--head);font-weight:800;font-size:clamp(2.6rem,8vw,4.75rem);line-height:.98;letter-spacing:-.005em;max-width:14ch}
.real{display:inline-block;margin-bottom:1rem;padding:.25rem .7rem;border:2px solid var(--ink);border-radius:999px;background:var(--warn);font:700 1rem var(--head);letter-spacing:.04em;text-transform:uppercase}
.lede{margin-top:1.25rem;font-size:1.2rem;color:var(--muted);max-width:34rem}
.lede b{color:var(--ink)}
.ticks{list-style:none;margin-top:1.75rem;display:grid;gap:.6rem;font-weight:600}
.ticks li{display:flex;gap:.7rem;align-items:flex-start}
.ticks li::before,.checklist li::before{content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.3rem;border-radius:50%;background:var(--warn);box-shadow:inset 0 0 0 3px var(--warn-ink)}

/* checker: the one memorable element */
.checker{background:var(--paper);border:2px solid var(--ink);border-radius:6px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.checker h2{background:var(--ink);color:#fff;font-family:var(--head);font-size:1.35rem;font-weight:700;padding:.8rem 1.25rem}
.checker .body{padding:1.25rem}
.checker p.note{color:var(--muted);font-size:.95rem}
.pc{display:flex;gap:.5rem;margin:1rem 0}
.pc input{width:100%;min-width:0;text-align:center;font:700 2rem var(--head);padding:.55rem 0;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink)}
.pc input:focus-visible,button:focus-visible,.button:focus-visible,.lead input:focus-visible,.form-group :is(input,select,textarea):focus-visible{outline:3px solid var(--neutral);outline-offset:2px}

/* buttons: <button> is full width, a.button sizes to its text */
button,.button{font:700 1.25rem var(--head);letter-spacing:.02em;padding:.8rem 1rem;border:2px solid var(--ink);border-radius:4px;background:var(--warn);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
button{width:100%}
button:hover,.button:hover{background:#ffe55c}
button:disabled{opacity:.6;cursor:wait}

.result{margin-top:1rem;padding:.9rem 1rem;border-radius:4px;border:2px solid;font-weight:600;display:none}
.result.ok{display:block;border-color:var(--earth-g);background:#eaf6ee}
.result.no{display:block;border-color:var(--bad);background:#fbeceb}
.result.err{display:block;border-color:var(--line);background:#fff}
.lead{display:none;margin-top:1rem;gap:.6rem}
.lead.show{display:grid}
.lead input{font:500 1rem var(--body);padding:.7rem .8rem;border:2px solid var(--ink);border-radius:4px;width:100%}
.lead .fine{color:var(--muted);font-size:.85rem}
.log{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem}
.log h3{font:700 1rem var(--head);margin-bottom:.5rem;color:var(--muted)}
.log div{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.log div:last-child{border:0}
.locked{color:var(--bad);font-weight:700}
.open{color:#1e7a3a;font-weight:700}

/* Gary */
.gary{background:var(--paper);padding:3.5rem 0}
.gary .wrap{display:grid;gap:1.75rem;align-items:start}
.gary img{width:160px;height:160px;border-radius:50%;object-fit:cover;border:4px solid var(--ink);box-shadow:0 0 0 5px var(--warn)}
.gary h2{font-family:var(--head);font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1;margin-bottom:1rem}
.gary p{max-width:38rem;margin-bottom:.9rem}

/* steps */
.steps{background:var(--ink);color:#fff;padding:3.5rem 0}
.steps h2{font-family:var(--head);font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1;max-width:18ch}
.steps .sub{color:#aebccb;margin-top:.8rem;max-width:36rem}
.steps a{color:var(--warn)}
.grid{display:grid;gap:1.25rem;margin-top:2.25rem;counter-reset:s}
.step{counter-increment:s;border-top:4px solid var(--warn);padding-top:1rem}
.step::before{content:counter(s);display:block;font:800 2.6rem/1 var(--head);color:var(--warn);margin-bottom:.4rem}
.step h3{font:700 1.45rem var(--head);margin-bottom:.35rem}
.step p{color:#c9d4de;font-size:1rem}

/* FAQs */
.faq-sec{background:var(--paper);border-top:1px solid var(--line);padding:3.5rem 0}
.faq-sec h2{font-family:var(--head);font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1}
.faq{margin-top:1.75rem;border-top:3px solid var(--ink)}
.faq > div{display:grid;gap:.3rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.faq dt{font:700 1.55rem/1.1 var(--head)}
.faq dd{max-width:40rem}

/* closing */
.cta{padding:3.5rem 0}
.cta .wrap{display:grid;gap:1rem}
.cta h2{font-family:var(--head);font-weight:800;font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.02;max-width:20ch}
.cta p{color:var(--muted);max-width:34rem}
.cta a.go{display:inline-block;width:max-content;font:700 1.25rem var(--head);background:var(--ink);color:#fff;text-decoration:none;padding:.8rem 1.4rem;border-radius:4px}
.cta a:focus-visible{outline:3px solid var(--neutral);outline-offset:2px}

/* how-to pages (grant access, cancel, and so on) */
.page-title{background:var(--ink);color:#fff;padding:2.5rem 0 2.25rem}
.page-title h1{max-width:none;font-size:clamp(2.2rem,7vw,3.5rem)}
.page-title p{color:#aebccb;margin-top:.75rem;max-width:40rem}
.stack{padding-top:2.25rem;padding-bottom:1.5rem}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:1.5rem;margin-bottom:1.25rem}
.card h2{font:800 clamp(1.7rem,4.5vw,2.1rem)/1.1 var(--head);margin-bottom:.75rem}
.card p{margin-bottom:.8rem}
.card ol,.card ul:not(.checklist){padding-left:1.35rem;margin-bottom:.8rem}
.card li{margin-bottom:.5rem}
.card .note{background:#fff;border-left:6px solid var(--warn);padding:.85rem 1rem;margin-top:1rem}
.card > :last-child{margin-bottom:0}
.checklist{list-style:none;display:grid;gap:.6rem;margin:1rem 0}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;margin:0}
.copybox{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;background:#fff;border:2px solid var(--ink);border-radius:4px;padding:.8rem 1rem;margin:1rem 0}
.copybox .label{width:100%;font-weight:600;font-size:.9rem;color:var(--muted)}
.copybox code{flex:1 1 12rem;font:700 1.15rem "Courier New",monospace;user-select:all;-webkit-user-select:all;word-break:break-all}
.copybox button{width:auto;padding:.35rem 1rem;font-size:1.05rem}
.copied{display:none;color:#1e7a3a;font-weight:700;font-size:.9rem}

/* forms */
.contact-form{max-width:36rem;margin-top:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;margin-bottom:.3rem;font-weight:600}
.form-group :is(input:not([type=checkbox]),select,textarea){font:500 1rem var(--body);padding:.7rem .8rem;border:2px solid var(--ink);border-radius:4px;width:100%;background:#fff;color:var(--ink);min-height:44px}
.form-group textarea{min-height:0}
.form-group small{display:block;margin-top:.3rem;color:var(--muted);font-size:.9rem}
.form-group .check-row{display:flex;align-items:flex-start;gap:.7rem;font-weight:500;cursor:pointer}
.form-group .check-row input{width:auto;min-height:0;flex:none;margin-top:.3rem;transform:scale(1.3)}
.form-error{background:#fbeceb;border:2px solid var(--bad);border-radius:4px;padding:.85rem 1rem;margin-bottom:1rem}
.hp{position:absolute;left:-9999px;height:0;width:0;overflow:hidden}
.done-panel{background:var(--ink);color:#fff;padding:1.5rem;border-radius:6px;margin-top:1rem}
.done-panel h3{font:800 2rem/1.1 var(--head);margin-bottom:.9rem}
.done-panel dl{margin-bottom:1rem}
.done-panel dl div{display:grid;grid-template-columns:6rem 1fr;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #2a4157}
.done-panel dt{color:#aebccb}
.done-panel dd{font-weight:700}
.done-panel a{color:var(--warn)}
.done-panel a.button{color:var(--ink)}
.done-panel .fine{font-size:.92rem;color:#c9d4de;margin-top:.9rem}
.goodbye{background:var(--ink);color:#fff;padding:1.5rem;border-radius:6px;border-left:8px solid var(--warn);margin:2rem 0 1rem}
.goodbye h2{font:800 1.9rem/1.1 var(--head);margin-bottom:.6rem}
.goodbye a{color:var(--warn)}

/* simple pages (contact, 404, thanks, legal) */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}
.logo a{color:inherit;text-decoration:none}
.card h1{max-width:none;font-size:clamp(2.2rem,7vw,3rem);margin-bottom:1rem}
.card a.button{margin:.3rem .5rem .3rem 0}
.button.secondary{background:#fff}
.button.secondary:hover{background:var(--ink);color:#fff}
.callout{background:#fff;border-left:6px solid var(--warn);padding:.85rem 1rem;margin:1rem 0}
.muted{color:var(--muted)}
.legal h2{font-size:1.5rem;margin:1.6rem 0 .5rem}
.legal ul{padding-left:1.35rem;margin-bottom:.8rem}
.form-row{display:grid;gap:1rem}
.form-done{background:var(--ink);color:#fff;padding:1.5rem;border-radius:6px;margin-top:1rem}
.form-done h2,.form-done h3{font:800 2rem/1.1 var(--head);margin-bottom:.8rem;color:#fff}
.form-done a{color:var(--warn)}
.form-done a.button{color:var(--ink)}
.form-done .form-small{font-size:.95rem;color:#c9d4de}
.next-steps{list-style:none;counter-reset:n;margin:1rem 0}
.next-steps li{counter-increment:n;position:relative;padding-left:2.8rem;margin-bottom:1rem}
.next-steps li::before{content:counter(n);position:absolute;left:0;top:.1rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--warn);box-shadow:inset 0 0 0 2px var(--warn-ink);font:800 1.1rem/1.9rem var(--head);text-align:center}

/* price */
.price-line{margin-top:1.5rem}
.price-line > b{display:block;font:800 2.8rem/1 var(--head)}
.price-line span{display:block;margin-top:.4rem;color:var(--muted);font-weight:600;max-width:34rem}
.price-line span b,.price-line span strong{color:var(--ink);font-weight:800}

/* trade picker (home page) */
.trade-list{list-style:none;margin:1rem 0 .5rem}
.trade-list li{border-bottom:1px dashed var(--line)}
.trade-list li:last-child{border:0}
.trade-list a,.trade-list .soon{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;font:700 1.6rem var(--head);text-decoration:none;color:var(--ink)}
.trade-list a:hover span{text-decoration:underline}
.trade-list em{font:600 .95rem var(--body);font-style:normal;padding:.15rem .65rem;border-radius:999px;border:2px solid var(--ink)}
.trade-list .live{background:var(--warn)}
.trade-list .soon{color:var(--muted)}
.trade-list .soon em{border-color:var(--line)}
.checker .more{margin-top:.75rem;font-size:.95rem}

/* footer, identical on every page */
footer{background:var(--paper);border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;padding:1.5rem 0}
footer p,footer nav{margin-bottom:.6rem}
footer .wrap > :last-child{margin-bottom:0}
footer a{color:inherit;font-weight:600}
.f-links a + a{margin-left:.6rem;padding-left:.7rem;border-left:1px solid var(--line)}

@media(min-width:56rem){
  .hero{grid-template-columns:7fr 5fr;gap:3.5rem;align-items:start;padding:4.5rem 0 5rem}
  .grid{grid-template-columns:repeat(4,1fr);gap:1.75rem}
  .gary .wrap{grid-template-columns:200px 1fr;gap:2.75rem}
  .faq > div{grid-template-columns:300px 1fr;gap:2rem}
  .form-row{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:no-preference){
  .result{animation:pop .18s ease-out}
  @keyframes pop{from{transform:translateY(4px);opacity:0}to{transform:none;opacity:1}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Fix text hitting the left/right screen edges on mobile devices */
@media (max-width: 55.99rem) {
  body {
    padding-left: 0.45rem;
    padding-right: 0.2rem;
  }
}