/* AwayINN by INNPLAY — brand sheet v1: Night #0A0A0B, Play Blue #34B4FA, Inn Blush #FCE7E0, White;
   Anton all-caps headlines + Work Sans body/UI (fonts loaded from Google Fonts in each page's <head>). */

:root{
  /* Brand base (same tokens as inn-play.com) */
  --ip-sky:#34B4FA;--ip-black:#0A0A0B;--ip-ink:#1C1C1F;--ip-paper:#FFFAF8;--ip-white:#FFFFFF;--ip-blush:#FCE7E0;--ip-night-2:#16161A;--ip-night-line:#26262B;
  --ip-sky-50:#EAF6FE;--ip-sky-100:#D3EEFE;--ip-sky-200:#A9DDFD;--ip-sky-300:#6CCBFF;--ip-sky-500:#1E9FE6;--ip-sky-600:#0A71AB;--ip-sky-700:#075D8E;
  --ip-gray-50:#FAFAF6;--ip-gray-100:#F2F2EE;--ip-gray-200:#E4E4DF;--ip-gray-300:#CACAC5;--ip-gray-400:#A3A39F;--ip-gray-500:#7B7B78;--ip-gray-600:#5A5A58;--ip-gray-700:#424142;
  --ip-green:#1FA463;--ip-green-50:#E8F7EF;--ip-green-ink:#137245;
  --ip-amber:#F2A516;--ip-amber-50:#FEF4E0;--ip-amber-ink:#8A5A00;
  --ip-red:#E5484D;--ip-red-50:#FDECEC;--ip-red-ink:#B4232A;
  --font-headline:'Anton','Impact','Arial Narrow',sans-serif;--font-display:'Work Sans',system-ui,sans-serif;--font-sans:'Work Sans',system-ui,sans-serif;
  --radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;
  --shadow-md:0 4px 14px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);--shadow-lg:0 18px 40px rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.06);
  --shadow-focus:0 0 0 3px rgba(52,180,250,.45);--ease-out:cubic-bezier(.2,.8,.2,1);

  /* Names the app's inline styles use, mapped onto the brand */
  --ink:var(--ip-black);--ink2:var(--ip-ink);--muted:var(--ip-gray-600);--line:var(--ip-gray-200);--bg:var(--ip-paper);--card:var(--ip-white);
  --blue:var(--ip-sky-600);--blue-d:var(--ip-sky-700);--blue-l:var(--ip-sky-50);
  --ok:var(--ip-green-ink);--ok-l:var(--ip-green-50);--warn:var(--ip-amber-ink);--warn-l:var(--ip-amber-50);
  --bad:var(--ip-red-ink);--bad-l:var(--ip-red-50);--violet:var(--ip-black);--violet-l:var(--ip-sky-50);
  --r:var(--radius-md);--shadow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ip-paper);color:var(--ip-ink);font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--ip-sky);color:var(--ip-black)}
:focus-visible{outline:3px solid var(--ip-sky);outline-offset:2px}
a{color:var(--ip-sky-600);text-decoration:underline;text-decoration-color:var(--ip-sky);text-underline-offset:3px}
a:hover{color:var(--ip-black)}
h1,h2,h3{font-family:var(--font-headline);font-weight:400;text-transform:uppercase;color:var(--ip-black);margin:0 0 .5rem;letter-spacing:.01em;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,60px);line-height:1}
h2{font-size:24px;line-height:1.1}
h3{font-size:19px;line-height:1.15;letter-spacing:.02em}
.hl{color:var(--ip-sky-600);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ip-gray-600)}
.slogan{font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ip-gray-600)}
.muted{color:var(--ip-gray-600)}.small{font-size:14px}.tiny{font-size:12.5px}.right{text-align:right}.nowrap{white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
code{background:var(--ip-gray-100);padding:1px 5px;border-radius:4px;font-size:.9em}

/* Header — same pattern as inn-play.com: logo left, caps nav, sky pill CTA */
header.top{background:var(--ip-black);border-bottom:1px solid var(--ip-night-line);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;gap:20px;height:84px}
/* AwayINN wordmark (text, so it stays crisp): "Away" Play Blue + "INN" Blush on Night, "BY INNPLAY" beside it */
.logo{display:flex;align-items:flex-end;gap:10px;flex:none;text-decoration:none;font-family:var(--font-headline);text-transform:none;line-height:.9}
.logo .w{font-size:34px;letter-spacing:.02em;color:var(--ip-blush)}.logo .w b{font-weight:400;color:var(--ip-sky)}
.logo .by{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.7);padding-bottom:3px}.logo .by b{font-weight:400;color:var(--ip-sky)}
.logo .by span{color:var(--ip-blush)}
.logo.on-light .w,.logo.on-light .by span{color:var(--ip-black)}.logo.on-light .by{color:var(--ip-gray-600)}
header.top nav{margin-left:auto;display:flex;gap:22px;align-items:center}
header.top nav a{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ip-blush);text-decoration:none;padding:6px 0 3px;border-bottom:3px solid transparent}
header.top nav a:hover,header.top nav a.on{border-bottom-color:var(--ip-sky)}
header.top nav a.btn{border:0;padding:0 18px;color:var(--ip-black)}
header.top nav a:hover{color:var(--ip-white)}header.top nav a.btn:hover{color:var(--ip-black)}
.announce{background:var(--ip-black);color:var(--ip-paper);text-align:center;font-weight:600;font-size:13.5px;padding:8px 16px}
.announce b{font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.12em;color:var(--ip-sky);margin-right:8px}

/* Buttons — pill, caps */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--radius-pill);border:2px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none;
  background:var(--ip-sky);color:var(--ip-black);transition:background 120ms var(--ease-out),color 120ms var(--ease-out),transform 120ms var(--ease-out)}
.btn:hover{background:var(--ip-sky-500);color:var(--ip-black);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--ip-black);border-color:var(--ip-black)}
.btn.ghost:hover{background:var(--ip-black);color:var(--ip-paper)}
.btn.dark{background:var(--ip-black);color:var(--ip-paper)}.btn.dark:hover{background:var(--ip-ink)}
.btn.ok{background:var(--ip-black);color:var(--ip-paper)}.btn.ok:hover{background:var(--ip-ink)}
.btn.warn{background:var(--ip-amber);color:var(--ip-black)}.btn.warn:hover{background:#dd9510}
.btn.bad{background:var(--ip-red);color:#fff}.btn.bad:hover{background:#cf3a3f}
.btn.sm{height:34px;padding:0 14px;font-size:11px}
.btn.block{display:flex;width:100%}
.x{background:none;border:0;color:var(--ip-gray-500);cursor:pointer;font-size:22px;line-height:1}
.x:hover{color:var(--ip-black)}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Cards */
.card{background:var(--ip-white);border:1px solid var(--ip-gray-200);border-radius:var(--radius-md)}
.pad{padding:22px}
.card.outline{border:2px solid var(--ip-black)}

/* Forms — the website's field style */
input,select,textarea{font:inherit;font-weight:500;font-size:15px;height:46px;padding:0 14px;border:2px solid var(--ip-gray-200);border-radius:var(--radius-sm);background:#fff;width:100%;color:var(--ip-ink);outline:none;transition:box-shadow 120ms,border-color 120ms}
textarea{height:auto;padding:10px 14px}
input[type=checkbox],input[type=radio]{height:auto;width:auto;accent-color:var(--ip-black)}
input:focus,select:focus,textarea:focus{border-color:var(--ip-black);box-shadow:var(--shadow-focus)}
label{display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ip-black);margin-bottom:6px}
.field{margin-bottom:14px}.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1;min-width:130px}
.row>[style*="flex:0"]{flex:0 0 auto!important;min-width:0}
.grid{display:grid;gap:20px}

/* Badges (the site's .badge) */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 10px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--ip-gray-100);color:var(--ip-ink);line-height:1.3}
.pill.ok{background:var(--ip-green-50);color:var(--ip-green-ink)}
.pill.warn{background:var(--ip-amber-50);color:var(--ip-amber-ink)}
.pill.bad{background:var(--ip-red-50);color:var(--ip-red-ink)}
.pill.blue{background:var(--ip-sky);color:var(--ip-black)}
.pill.violet,.pill.dark{background:var(--ip-black);color:var(--ip-paper)}

/* Notices */
.banner{border-radius:var(--radius-md);padding:14px 18px;margin:16px 0;display:flex;gap:12px;align-items:flex-start;border:1px solid transparent;font-weight:500}
.banner.ok{background:var(--ip-green-50);color:#0c4a2c;border-color:#bfe8d2}
.banner.warn{background:var(--ip-amber-50);color:#5e3d00;border-color:#f6d9a0}
.banner.blue{background:var(--ip-sky-50);color:var(--ip-black);border-color:var(--ip-sky-100)}
.banner.bad{background:var(--ip-red-50);color:var(--ip-red-ink);border-color:#f6c9ca}
.banner.violet{background:var(--ip-black);color:var(--ip-paper)}
.banner.violet a{color:var(--ip-sky)}
.banner b{font-weight:700}
.banner>.icon{margin-top:3px}
.pill .icon{width:13px;height:13px}
.demo-note{background:var(--ip-gray-100);border:1px dashed var(--ip-gray-300);color:var(--ip-gray-700);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;margin:12px 0}

/* Heroes — split layout like the website: caps headline + rounded photo */
.hero{padding:clamp(32px,5vw,72px) 0 clamp(28px,4vw,56px)}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,64px);align-items:center}
.hero .copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-width:0}
.hero .copy p{font-size:18px;line-height:1.6;margin:0;max-width:44ch}
.hero .photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--ip-black);box-shadow:var(--shadow-md)}
.hero .photo img{display:block;width:100%;height:100%;object-fit:cover}
.hero.night{background:var(--ip-black);color:var(--ip-blush)}
.hero.night h1{color:var(--ip-blush)}.hero.night .hl{color:var(--ip-sky)}.hero.night .copy p{color:rgba(255,255,255,.82)}
.hero.night .slogan{color:var(--ip-sky)}.hero.night .btn.ghost{color:var(--ip-blush);border-color:var(--ip-blush);background:transparent}
.hero.night .btn.ghost:hover{background:var(--ip-blush);color:var(--ip-black)}
.sports{display:flex;flex-wrap:wrap;gap:8px}.sports span{padding:6px 14px;border-radius:var(--radius-pill);background:var(--ip-night-2);border:1px solid #3A3A40;color:var(--ip-white);font-size:13.5px;font-weight:500}
.hero .facts{display:flex;flex-direction:column;gap:8px}
.fact{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--ip-ink)}
.icon{display:inline-block;flex:none;width:18px;height:18px;background:var(--ip-black);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.icon.sky{background:var(--ip-sky)}
.kicker{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ip-gray-600)}

/* Tabs — like the site nav (sky underline) */
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--ip-gray-200);margin:22px 0 18px;overflow-x:auto}
.tabs button{background:none;border:0;padding:12px 14px;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ip-gray-600);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs button:hover{color:var(--ip-black)}
.tabs button.on{color:var(--ip-black);border-color:var(--ip-sky)}

.layout{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;margin-bottom:64px}
@media(max-width:960px){.layout{grid-template-columns:1fr}}
.layout>*,.hotel>*{min-width:0}
.cart{position:sticky;top:100px}
.cart h3{font-size:15px}
.cart .line{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px dashed var(--ip-gray-200)}
.cart .line:last-child{border:0}

/* Hotels & results */
.hotel{display:grid;grid-template-columns:250px 1fr;overflow:hidden}
.hotel img{width:100%;height:100%;object-fit:cover;min-height:190px;background:var(--ip-gray-100)}
.hotel h3{font-size:18px}
.offer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--ip-gray-200);padding:14px 0}
.offer:first-of-type{border-top:0}
.offer b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:13.5px;letter-spacing:.02em;color:var(--ip-black)}
.price{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ip-black);letter-spacing:-.01em}
.strike{text-decoration:line-through;color:var(--ip-gray-500);font-weight:500;font-size:14px}
.result{display:flex;justify-content:space-between;align-items:center;gap:14px}
@media(max-width:640px){.hotel{grid-template-columns:1fr}.hotel img{height:180px}
  .offer,.result{flex-wrap:wrap}.offer>.right,.result>.right{width:100%;text-align:left;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .offer>.right .btn,.result>.right .btn{margin:0 0 0 auto!important}}

/* Event & company cards — like the site's event cards */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.event-card{display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow 200ms var(--ease-out),transform 200ms var(--ease-out)}
.event-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit}
.event-card .img{height:170px;background:var(--ip-black) center/cover}
.event-card h3{font-size:20px;line-height:1.15;margin:12px 0 10px}
.event-card .go{margin-top:auto;padding-top:14px}

/* Checkout */
.steps{display:flex;gap:10px;margin:22px 0}.steps div{flex:1;padding:10px 0;border-top:4px solid var(--ip-gray-200);font-family:var(--font-display);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ip-gray-500)}
.steps div.on{border-color:var(--ip-sky);color:var(--ip-black)}
.opt{border:2px solid var(--ip-gray-200);border-radius:var(--radius-md);padding:14px 16px;display:flex;gap:12px;cursor:pointer;margin-bottom:10px;align-items:flex-start;background:#fff;
  font-family:var(--font-sans);text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;color:var(--ip-ink)}
.opt b{font-family:var(--font-display);text-transform:uppercase;font-size:13.5px;letter-spacing:.03em;color:var(--ip-black)}
.opt input{margin-top:4px}.opt.on{border-color:var(--ip-black);background:var(--ip-sky-50)}.opt.disabled{opacity:.45;cursor:not-allowed}

/* Trip page */
.confs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.confs div{background:var(--ip-gray-50);border:1px solid var(--ip-gray-200);border-radius:var(--radius-sm);padding:9px 12px}
.confs span{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px!important;font-weight:700}
.confs b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:16px;color:var(--ip-black);margin-top:2px}
@media(max-width:640px){.confs{grid-template-columns:1fr!important}}
.conf-no{font-family:var(--font-display);font-weight:900;letter-spacing:.02em}
.timeline{list-style:none;margin:10px 0 0;padding:0}
.timeline li{position:relative;padding:0 0 12px 22px;font-size:14px}
.timeline li:before{content:"";position:absolute;left:5px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--ip-sky)}
.timeline li:after{content:"";position:absolute;left:8.5px;top:17px;bottom:0;width:1px;background:var(--ip-gray-200)}
.timeline li:last-child:after{display:none}
.lane{font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:5px;margin-right:6px}
.lane.l-guest{background:var(--ip-gray-100);color:var(--ip-black)}.lane.l-innplay{background:var(--ip-sky);color:var(--ip-black)}
.lane.l-live_api{background:var(--ip-green-50);color:var(--ip-green-ink)}.lane.l-staybook{background:var(--ip-amber-50);color:var(--ip-amber-ink)}
.lane.l-hotel{background:var(--ip-black);color:var(--ip-paper)}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-family:var(--font-display);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ip-gray-600);padding:10px 8px;border-bottom:2px solid var(--ip-black);background:transparent}
td{padding:10px 8px;border-bottom:1px solid var(--ip-gray-200);vertical-align:top}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ip-black);color:var(--ip-paper);padding:13px 20px;border-radius:var(--radius-pill);z-index:99;box-shadow:var(--shadow-lg);max-width:90vw;font-weight:600}
.toast.bad{background:var(--ip-red-ink)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--ip-paper);border-radius:var(--radius-lg);max-width:480px;width:100%;padding:26px;box-shadow:var(--shadow-lg)}
.spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:var(--ip-black);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:40px;text-align:center;color:var(--ip-gray-600)}

/* Footer — black, like inn-play.com */
footer{background:var(--ip-black);color:var(--ip-blush);margin-top:56px}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px;padding-top:44px;padding-bottom:36px}
footer .flogo{margin-bottom:14px}footer .flogo .logo .w{font-size:44px}
footer h4{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ip-sky);margin:0 0 12px}
footer a,footer span.c{display:flex;align-items:center;gap:10px;color:var(--ip-paper);text-decoration:none;font-weight:600;margin-bottom:10px}
footer a:hover{color:var(--ip-sky)}
footer p{margin:0;max-width:32ch;font-size:15px;line-height:1.6}
footer .legal{grid-column:1/-1;border-top:1px solid var(--ip-gray-700);padding-top:18px;font-size:13px;color:var(--ip-gray-400)}

/* FlexPay "from $X/mo" line: right-aligned under the price, above the button */
.fp-from{text-align:right;white-space:normal;margin-top:2px}
.fp-from up-from-pricing{--fp-align:end}  /* Uplift's supported alignment property */