/* Indy's Dopest x Trevor St. Aubin co-branded landing pages (/dopest/buy, /dopest/sell).
   Indy's Dopest design system: navy, off-white, blue, salmon, Commissioner, hard "extrude" shadows. */
:root{--navy:#1b1d36;--navy7:#07070e;--navy3:#767786;--navy1:#d1d2d7;--paper:#fff9e1;--paper1:#fffef9;--blue:#2badfc;--blue7:#2082bd;--salmon:#ff6f68;--salmon7:#bf534e;--red:#ee3124;
  --ex-navy:6px 6px 0 var(--navy);--ex-blue:6px 6px 0 var(--blue);--ex-salmon:6px 6px 0 var(--salmon);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--navy);font:400 17px/1.55 Commissioner,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue7);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--paper);padding:8px 14px;border-radius:999px;z-index:9}
.skip:focus{left:16px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 32px}}

/* top bar: the two brands, side by side */
.dbar{padding:18px 0;border-bottom:2px solid var(--navy)}
.dbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lock{display:flex;align-items:center;gap:14px;text-decoration:none}
.lock .dl{width:132px}
.lock .x{font-weight:900;font-size:22px;line-height:1}
.lock .ap{width:150px}
.dbar .call{font-weight:800;font-size:15px;text-decoration:none;background:var(--salmon);border:2px solid var(--navy);border-radius:999px;padding:9px 16px;box-shadow:4px 4px 0 var(--navy);white-space:nowrap}
@media(max-width:560px){.lock .dl{width:96px}.lock .ap{width:104px}.lock{gap:8px}.dbar .call{display:none}}

/* hero */
.dhero{padding:48px 0 64px}
.dhero .wrap{display:grid;gap:48px;align-items:center}
@media(min-width:860px){.dhero .wrap{grid-template-columns:1.15fr .85fr}}
.kick{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--blue);border:2px solid var(--navy);border-radius:999px;padding:6px 14px;margin:0 0 20px}
.dhero h1{font-weight:900;font-size:clamp(44px,7vw,78px);line-height:.95;letter-spacing:-.02em;margin:0 0 22px;text-transform:lowercase}
.dhero h1 span{display:inline-block;color:var(--salmon);text-shadow:4px 4px 0 var(--navy)}
.sub{font-family:"Bernhard Gothic URW",Commissioner,system-ui,sans-serif;font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.15;margin:0 0 18px}
.lede{font-size:19px;max-width:40ch;margin:0 0 28px}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 16px/1 Commissioner,system-ui,sans-serif;color:var(--navy);text-decoration:none;background:var(--paper1);border:2px solid var(--navy);border-radius:999px;padding:15px 22px;box-shadow:var(--ex-navy);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--navy)}
.btn:active{transform:translate(6px,6px);box-shadow:none}
.btn.hot{background:var(--salmon)}
.btn.cool{background:var(--blue)}

/* Trevor + @ badge */
.me{position:relative;max-width:420px;justify-self:center;width:100%}
.me .ph{border:3px solid var(--navy);box-shadow:12px 12px 0 var(--blue);background:var(--salmon)}
.me .ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.me .at{position:absolute;right:-14px;top:-18px;width:92px;height:92px;border-radius:50%;background:#fff;border:3px solid var(--navy);display:grid;place-items:center;box-shadow:var(--ex-navy);transform:rotate(-8deg)}
.me .at img{width:56px}
.me .tag{position:absolute;left:-12px;bottom:22px;background:var(--paper1);border:2px solid var(--navy);border-radius:999px;padding:10px 16px;font-weight:800;font-size:14px;line-height:1.2;box-shadow:var(--ex-navy)}
.me .tag small{display:block;font-weight:400;font-size:13px}
@media(max-width:560px){.me .at{right:4px;width:76px;height:76px}.me .at img{width:46px}.me .tag{left:8px}}

/* blue / salmon / navy panels */
.panel{padding:64px 0;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.panel.blue{background:var(--blue)}
.panel.salmon{background:var(--salmon)}
.panel.navy{background:var(--navy);color:var(--paper)}
.panel h2,.sec h2{font-weight:900;font-size:clamp(36px,5.6vw,56px);line-height:1;letter-spacing:-.015em;margin:0 0 16px;text-transform:lowercase}
.panel.navy h2 em{color:var(--blue);font-style:normal}
.sec{padding:72px 0}
.label{font-weight:300;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}

/* guide + form card */
.gbox{display:grid;gap:36px;align-items:center}
@media(min-width:820px){.gbox{grid-template-columns:.7fr 1.3fr}}
.cover{border:3px solid var(--navy);box-shadow:12px 12px 0 var(--navy);max-width:300px;transform:rotate(-3deg);justify-self:center;background:#fff}
.card{background:var(--paper1);border:3px solid var(--navy);box-shadow:10px 10px 0 var(--navy);padding:28px}
@media(min-width:700px){.card{padding:36px}}
.card p{margin:0 0 18px}
.gfields{display:grid;gap:14px;margin:0 0 18px}
@media(min-width:560px){.gfields{grid-template-columns:1fr 1fr}}
.gfields label{display:grid;gap:6px;font-weight:800;font-size:14px}
.gfields input{font:400 17px Commissioner,system-ui,sans-serif;color:var(--navy);background:#fff;border:2px solid var(--navy);border-radius:12px;padding:13px 14px;width:100%}
.hp{position:absolute;left:-9999px}
.gfine{font-size:14px;margin:14px 0 0!important}
.gerr{font-weight:800;color:var(--salmon7);margin:12px 0 0!important}
.gdone{display:flex;gap:12px;align-items:center;font-weight:800;font-size:19px;background:var(--blue);border:2px solid var(--navy);border-radius:12px;padding:16px 18px}
.gdone i{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--paper);display:grid;place-items:center;flex:none}

/* three reasons */
.why{display:grid;gap:24px;margin-top:36px}
@media(min-width:820px){.why{grid-template-columns:repeat(3,1fr)}}
.why article{background:var(--paper1);border:2px solid var(--navy);padding:26px;box-shadow:var(--ex-navy)}
.why article:nth-child(2){box-shadow:var(--ex-salmon)}
.why article:nth-child(3){box-shadow:var(--ex-blue)}
.why h3{font-weight:800;font-size:23px;line-height:1.15;margin:0 0 10px}
.why p{margin:0}
.why .n{font-weight:900;font-size:15px;display:inline-block;background:var(--navy);color:var(--paper);border-radius:999px;padding:3px 11px;margin-bottom:14px}

/* Homebot */
.hb{background:#fff;border:3px solid var(--navy);box-shadow:10px 10px 0 var(--navy);padding:22px;min-height:120px;margin-top:24px}
.hint{font-size:15px;margin:12px 0 0}
.story{display:grid;gap:24px;align-items:center}
@media(min-width:820px){.story{grid-template-columns:auto 1fr}}
.story .big{font-weight:900;font-size:clamp(72px,12vw,140px);line-height:.9;letter-spacing:-.03em;color:var(--blue);text-shadow:6px 6px 0 var(--salmon);margin:0}
.story p{margin:0 0 12px;max-width:56ch}

/* doodle banner (finished brand art, used whole) */
.art{background:var(--salmon);border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.art img{width:100%;max-width:1600px;margin:0 auto}

/* close */
.close{text-align:center}
.close p{max-width:52ch;margin:0 auto 26px;font-size:19px}
.close .btns{justify-content:center}

/* footer (license statement + Equal Housing Opportunity required) */
.dfoot{background:var(--navy);color:var(--navy1);padding:48px 0 40px;font-size:15px}
.dfoot .wrap{display:grid;gap:24px}
.dfoot .logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.dfoot .logos img.dw{width:190px}.dfoot .logos img.ar{width:190px}
.dfoot a{color:var(--paper);text-decoration-color:var(--blue)}
.dfoot .contact{display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--paper);font-weight:800}
.dfoot .fine{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;border-top:1px solid var(--navy3);padding-top:18px}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* hero with the form (or Homebot box) built in */
.dhero{padding:40px 0 64px}
.dhero .wrap{align-items:start}
.dhero .lede{margin-bottom:24px}
.hcard{margin-top:0}
.card.hcard{padding:24px}
.ghead{display:flex;gap:16px;align-items:center;margin:0 0 18px}
.ghead img{width:64px;flex:none;border:2px solid var(--navy);transform:rotate(-4deg);background:#fff}
.ghead .label{margin:0 0 4px}
.ghead .gt{margin:0;font-size:15px;line-height:1.4}
.mini{display:none;align-items:center;gap:12px;margin:0 0 18px;font-weight:800;font-size:15px;line-height:1.2}
.mini>img{width:64px;height:64px;object-fit:cover;object-position:50% 20%;border:2px solid var(--navy);box-shadow:4px 4px 0 var(--blue);background:var(--salmon)}
.mini small{display:block;font-weight:400;font-size:14px}
.mini .atm{display:inline-block;width:15px;height:auto;vertical-align:-2px;margin-right:1px}
@media(min-width:860px){.dhero .me{margin-top:56px}}
@media(max-width:859px){.dhero .me{display:none}.mini{display:flex}.dhero{padding:28px 0 56px}.dhero .wrap{gap:0}}
@media(max-width:859px){
  .dhero{padding-top:20px}
  .kick{font-size:12px;padding:5px 12px;margin-bottom:14px}
  .mini{margin-bottom:14px}
  .dhero h1{font-size:40px;margin-bottom:14px}
  .dhero .lede{font-size:17px;line-height:1.5;margin-bottom:18px}
  .card.hcard{padding:18px}
  .ghead{margin-bottom:14px}.ghead img{width:48px}.ghead .gt{font-size:14px}
  .gfields{gap:10px;margin-bottom:14px}.gfields input{padding:11px 12px}
}