/* book.teapps.ca/mosaiq - styled after the ARRIV Mosaiq page: Figtree, navy #07074E, orange #F7921E, square corners. */
  :root { --navy:#07074E; --orange:#F7921E; --ink:#1F1F1F; --head:#434444; --line:#D9DCE3; --soft:#F4F5F8; --muted:#5C6270; }
  * { box-sizing:border-box; }
  body { margin:0; font-family:Figtree, Arial, sans-serif; color:var(--ink); background:#fff; font-size:16px; letter-spacing:.02em; }
  a { color:var(--navy); }
  .topbar { background:var(--navy); color:#fff; font-size:14px; font-weight:600; }
  .topbar .in, .head .in, .hero .in, main, .foot .in { max-width:980px; margin:0 auto; padding:0 20px; }
  .topbar .in { display:flex; justify-content:flex-end; gap:22px; padding-top:9px; padding-bottom:9px; }
  .topbar button { background:none; border:0; color:#fff; font:inherit; cursor:pointer; padding:0; }
  .topbar button[aria-pressed=true] { text-decoration:underline; text-underline-offset:4px; }
  .head { border-bottom:1px solid var(--line); }
  .head .in { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
  .brand { font-weight:800; font-size:24px; color:var(--navy); letter-spacing:.01em; }
  .brand small { display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
  .hero { background:var(--orange); color:#fff; }
  .hero .in { padding-top:34px; padding-bottom:34px; }
  .hero h1 { margin:0; font-size:30px; line-height:1.25; font-weight:700; text-transform:uppercase; }
  .hero p { margin:10px 0 0; font-size:18px; font-weight:500; }
  main { padding-top:32px; padding-bottom:48px; }
  .step { margin:0 0 34px; }
  .step h2 { margin:0 0 6px; font-size:24px; font-weight:700; color:var(--head); }
  .step h2 .n { display:inline-block; background:var(--orange); color:#fff; padding:0 8px; margin-right:8px; }
  .step .hint { margin:0 0 16px; color:var(--muted); font-size:15px; }
  .tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
  .tile { border:2px solid var(--line); background:#fff; padding:14px 16px; text-align:left; font:inherit; cursor:pointer; color:var(--ink); }
  .tile b { display:block; font-size:17px; color:var(--navy); }
  .tile span { display:block; font-size:14px; color:var(--muted); margin-top:3px; }
  .tile[aria-pressed=true] { border-color:var(--navy); background:var(--navy); }
  .tile[aria-pressed=true] b, .tile[aria-pressed=true] span { color:#fff; }
  .chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { border:2px solid var(--line); background:#fff; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; color:var(--navy); }
  .chip[aria-pressed=true] { background:var(--navy); border-color:var(--navy); color:#fff; }
  .next { border:2px solid var(--navy); padding:16px 18px; margin-bottom:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
  .next .lbl { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--orange); }
  .next .when { font-size:20px; font-weight:700; color:var(--navy); }
  .day { margin:0 0 14px; }
  .day h3 { margin:0 0 8px; font-size:15px; font-weight:700; color:var(--head); }
  .btn { background:var(--navy); color:#fff; border:0; padding:12px 22px; font:inherit; font-weight:600; font-size:16px; cursor:pointer; }
  .btn[disabled] { opacity:.45; cursor:not-allowed; }
  .btn.alt { background:#fff; color:var(--navy); border:2px solid var(--navy); padding:10px 20px; }
  form { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px 18px; }
  label { display:grid; gap:6px; font-weight:600; font-size:15px; color:var(--head); }
  input, select, textarea { font:inherit; font-weight:400; border:2px solid var(--line); padding:10px 12px; color:var(--ink); background:#fff; }
  input:focus, select:focus, textarea:focus, .tile:focus-visible, .chip:focus-visible, .btn:focus-visible { outline:3px solid var(--orange); outline-offset:1px; }
  .full { grid-column:1 / -1; }
  .note { font-size:13px; color:var(--muted); line-height:1.5; }
  .hp { position:absolute; left:-9999px; }
  [hidden] { display:none !important; }
  .summary { background:var(--soft); border-left:6px solid var(--orange); padding:14px 16px; margin:0 0 18px; }
  .summary b { color:var(--navy); }
  .done { border:2px solid var(--navy); padding:26px; }
  .done h2 { margin:0 0 8px; color:var(--navy); font-size:26px; }
  .err { color:#B00020; font-weight:600; margin:10px 0 0; }
  .gap { margin-top:16px; }
  .mock { background:#FFF4E5; border:1px dashed var(--orange); padding:8px 12px; font-size:13px; margin:0 0 20px; color:#7A4200; }
  .foot { background:var(--navy); color:#fff; font-size:14px; }
  .foot .in { padding-top:22px; padding-bottom:22px; display:flex; flex-wrap:wrap; gap:8px 26px; }
  @media (max-width:600px) { .hero h1 { font-size:24px; } .next .when { font-size:18px; } }