/* in.miami: the abq.guru system dressed for Miami. Art deco in the way a good Miami Beach hotel is: midnight
   navy, ivory, shell pink, brass hairlines, a didone face. No glow. Geometry carries the place. */
:root{
  --bg:#F8F3EB; --surface:#FFFDF9; --ink:#0F1C2B; --muted:#55606C; --border:rgba(15,28,43,.14);
  --accent:#8A6526; --on-accent:#fff; --dusk:#0A1420; --paper-on-dusk:#F8F3EB; --muted-on-dusk:#B9C1C9;
  --brass:#C9A66B; --brass-lt:#E3CB9A; --shell:#F1DDD3; --night:#0A1420;
  --display:"Bodoni Moda", "Fraunces", Georgia, serif;
}
h1,h2{font-weight:400;font-variation-settings:normal;letter-spacing:-.005em}
h3{font-family:var(--display);font-weight:400;letter-spacing:0;font-size:1.625rem}
.eyebrow{letter-spacing:.24em;font-size:.75rem}
.mark{font-family:var(--display);font-weight:400;font-style:italic;font-variation-settings:normal;font-size:1.5rem;letter-spacing:0}
.mark span{color:var(--brass);font-style:normal}

/* buttons: cut corners square, the way a brass plate is */
.pill{border-radius:2px;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;font-weight:500}
.lookup .pill,.twof .pill,.state .pill{font-size:.8125rem}
.lookup input{border-radius:2px}
.top nav .pill{letter-spacing:.12em}

/* hero */
.hero{background:linear-gradient(180deg,#0A1420 0%,#10283A 52%,#2B4A58 84%,#8E7C78 100%)}
.hero .deco{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(22vh,190px);opacity:.45;pointer-events:none}
.hero .deco *{stroke:var(--brass-lt);stroke-width:1.1}
.hero .eyebrow{color:var(--brass-lt)}
.hero h1{font-size:clamp(2.75rem, 1rem + 4.6vw, 5.1rem);line-height:1.04;max-width:none}
@media (min-width:1025px){.hero h1{font-size:clamp(3rem, 1rem + 3.7vw, 4.9rem)}}
.hero h1 .em{font-style:italic;color:var(--brass-lt);padding-bottom:.1em}
.hero h1 .line.em{overflow:visible}
.hero .lead{color:rgba(248,243,235,.84)}
.hero .micro{position:relative;text-shadow:0 0 10px #0A1420,0 0 4px #0A1420}
.hero .lookup input{border-color:rgba(227,203,154,.6);background:rgba(248,243,235,.07)}
.hero .lookup input:focus{border-color:var(--brass-lt)}
.hero .pill,.top:not(.solid) .pill{background:var(--brass-lt);color:#14110A}
.hero .pill:hover,.top:not(.solid) .pill:hover{background:#fff}
.hero .browser,.hero .phone{box-shadow:0 0 0 1px rgba(227,203,154,.5),0 34px 80px -20px rgba(0,0,0,.6)}
.top:not(.solid) .mark{color:var(--paper-on-dusk)}

/* deco rule: three stepped brass lines under headings on the day sections */
.steps .head h2::after,.faq .head h2::after,.who h2::after,.problem h2::after{content:"";display:block;margin-top:var(--s6);width:120px;height:11px;
  background:linear-gradient(var(--brass),var(--brass)) 0 0/120px 1px no-repeat,linear-gradient(var(--brass),var(--brass)) 0 5px/80px 1px no-repeat,linear-gradient(var(--brass),var(--brass)) 0 10px/40px 1px no-repeat}
.problem{background:var(--shell)}
.steps .num{font-family:var(--display);font-style:italic;color:var(--accent);font-variation-settings:normal}
.steps ol li{border-top:1px solid var(--brass);padding-top:var(--s6)}
.steps .rule{display:none}

/* price: night, with a double brass frame */
section.pricing,section.start{background:var(--night);--bg:#0A1420;--ink:#F8F3EB;--muted:#B9C1C9;--surface:#0F1D2C;--border:rgba(227,203,154,.22);--accent:#E3CB9A;--on-accent:#14110A;color:var(--ink)}
.pricing .card{background:#0F1D2C;border:1px solid var(--brass);border-radius:0;padding:calc(var(--s6) + 14px);outline:1px solid rgba(201,166,107,.45);outline-offset:-9px}
.pricing .price .big{font-family:var(--display);font-weight:400;color:var(--brass-lt)}
.pricing .card .pill,.start .pill{background:var(--brass-lt);color:#14110A}
.pricing .card .pill:hover,.start .pill:hover{background:#fff}
.start .lookup input{background:rgba(248,243,235,.06);color:var(--ink);border-color:rgba(227,203,154,.6)}
.start .lookup input::placeholder{color:rgba(248,243,235,.55)}

/* the word */
.cut{--bg:#0A1420;background:var(--night)}
.cut #cuttext{font-family:"Bodoni Moda","Fraunces",serif;font-weight:400;font-variation-settings:normal;letter-spacing:-.01em}
.cut .eyebrow{color:var(--brass-lt)}
.cut h2{color:var(--paper-on-dusk)}

.who .lead a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.faq summary{font-family:var(--display);font-size:1.25rem}
.foot{background:var(--night);border-top:1px solid rgba(201,166,107,.5)}
.foot .mark span{color:var(--brass)}
@media (max-width:760px){.hero .deco{height:110px;opacity:.3}.hero{padding-bottom:calc(var(--section) + 60px)}}
@media (max-width:640px){.top nav .pill{letter-spacing:.05em;font-size:.6875rem;padding:0 10px}.top nav .tel{font-size:.8125rem}.mark{font-size:1.25rem}}
