/* shore theme, ct-sided booking solutions product page.

   this file is linked from this one page and nowhere else, so the :root remaps
   below stay put: the rest of the site never loads it and never changes color.
   styles.css loads first for the base, header, footer and layout; this sheet
   loads after it and repaints the surfaces in the shore palette.

   the palette block at the very top is the source of truth. the booking system's
   own guest pages and front desk are getting re-themed to match this page, and
   they copy these exact values, so keep the nine names and their hexes stable.

   money is always brass here, the same way it is brass on the booking screens. */

:root {
  /* the shore palette. cream sand, sky and ocean blues, brass for money. */
  --sand:       #f2e8d5;   /* page ground, warm cream */
  --sand-deep:  #e6d5b8;   /* deeper sand, quiet bands */
  --foam:       #fcf8ef;   /* near white, raised sheets and cards */
  --sky:        #7cc3e6;   /* light sky, decorative fills and borders only */
  --sky-soft:   #d6e9f4;   /* pale sky wash, booked cells */
  --ocean:      #17607e;   /* mid ocean, links, accents, light end of buttons */
  --ocean-deep: #0d3b56;   /* deep ocean, dark end of buttons, strong accents */
  --ink:        #12303e;   /* deep tide navy, all body and heading text */
  --brass:      #79590f;   /* aged brass / driftwood, every price and dollar figure */

  /* remap the shared sheet's tokens onto the shore palette so every shared
     component paints itself without touching styles.css. later source wins. */
  --void:    var(--sand);
  --panel:   var(--foam);
  --panel-2: #e9f1f5;                    /* pale sky-grey, table heads and bars */
  --wash:    rgba(18, 48, 63, 0.045);
  --line:    rgba(18, 48, 63, 0.15);
  --line-2:  rgba(18, 48, 63, 0.30);
  --hair:    rgba(18, 48, 63, 0.07);

  --text:  var(--ink);
  --muted: #3d5f6f;    /* secondary text, tinted from the ink not gray */
  --faint: #4c6472;    /* eyebrows, captions, still AA on sand */

  --purple: var(--ocean);      /* the shared "accent" token is ocean now */
  --blue:   var(--sky);
  --up:     #167049;           /* status only: the sea-green "built" tick */

  --grad:      linear-gradient(135deg, var(--ocean), var(--sky));
  --grad-soft: linear-gradient(135deg, rgba(23, 96, 126, 0.12), rgba(124, 195, 230, 0.18));
  /* buttons stay dark end to dark end so white sits at 6.9:1 across the whole
     face, and border-box keeps the gradient from wrapping a streak at the edge */
  --grad-btn:  linear-gradient(90deg, var(--ocean-deep) 0%, var(--ocean) 100%);

  /* a soft, low, ocean-tinted shadow instead of the near-black one */
  --shadow: 0 26px 55px -40px rgba(13, 59, 86, 0.5);
}

/* ---------- repaint the shared hardcoded colors that show on this page ---------- */

/* the sticky header was a dark glass bar. make it foam glass. */
.site-header { background: rgba(252, 248, 239, 0.85); }

/* link hover was a light violet */
a:hover { color: var(--ocean-deep); }

/* ghost and nav hovers were white-alpha, invisible on a light ground */
.btn-ghost:hover { color: var(--text); background: rgba(18, 48, 63, 0.06); }
.main-nav a:hover { color: var(--text); background: rgba(18, 48, 63, 0.05); }

/* the "call us" button in the closing band sat on white text for a dark band.
   the band is light here, so give it ink. this class only appears there on this page. */
.btn-outline-light { color: var(--ink); border-color: var(--line-2); }
.btn-outline-light:hover { color: var(--ink); background: rgba(18, 48, 63, 0.06); }

/* soft-tinted accent chips (icons, badges) were light violet on a violet wash */
.card-icon { color: var(--ocean); }
.badge-soft { color: var(--ocean); }

/* the help modal's choice tiles carry a white icon on the full ocean-to-sky
   gradient. the sky end is way too light under a white glyph, so anchor them to
   the same dark button gradient the primary buttons use. */
.choice .ic { background: var(--grad-btn) border-box; }

/* the live dot keeps its green, just re-halo it to the sea-green */
.dot { box-shadow: 0 0 0 4px rgba(22, 112, 73, 0.18); }

/* the hero glow: a low sun to the left, open sky to the right, nothing loud */
.hero::before {
  background:
    radial-gradient(640px 380px at 4% -6%, rgba(214, 170, 92, 0.22), transparent 60%),
    radial-gradient(640px 460px at 100% 20%, rgba(124, 195, 230, 0.30), transparent 62%);
}

/* the closing band was a violet-washed dark card. warm sky over foam instead. */
.cta-band {
  background:
    radial-gradient(560px 240px at 50% 0%, rgba(124, 195, 230, 0.35), transparent 68%),
    var(--foam);
}

/* ---------- the room grid in the hero ---------- */
.bk-board {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.bk-board .bk-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
}
.bk-board .bk-bar b { color: var(--text); font-weight: 600; }
.bk-board .bk-bar .right { margin-left: auto; color: var(--faint); }

.bk-grid { display: grid; grid-template-columns: 40px repeat(6, 1fr); gap: 4px; padding: 18px 18px 14px; }
.bk-grid .hd {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); text-align: center; padding-bottom: 4px;
}
.bk-grid .rm { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; }
/* the three states step down in brightness, not just hue, so an open room still
   reads for a low-vision eye. measured against the foam board: open cell border
   1.8:1, booked fill 3.4:1 and 3.1:1 over an open cell, arriving today 11:1. */
.bk-grid .cell { height: 26px; border-radius: 5px; background: rgba(18, 48, 63, 0.05); border: 1px solid var(--line-2); }
.bk-grid .bkd { background: rgba(23, 96, 126, 0.70); border-color: var(--ocean); }
.bk-grid .now { background: var(--ocean-deep); border-color: transparent; }

/* the one animated moment: the week fills in a column at a time, once, on load */
@keyframes bkFill { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.bk-grid .cell { animation: bkFill 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.bk-grid .cell:nth-child(7n + 2) { animation-delay: 0.10s; }
.bk-grid .cell:nth-child(7n + 3) { animation-delay: 0.15s; }
.bk-grid .cell:nth-child(7n + 4) { animation-delay: 0.20s; }
.bk-grid .cell:nth-child(7n + 5) { animation-delay: 0.25s; }
.bk-grid .cell:nth-child(7n + 6) { animation-delay: 0.30s; }
.bk-grid .cell:nth-child(7n) { animation-delay: 0.35s; }

.bk-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  padding: 0 18px 14px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--faint);
}
.bk-legend span { display: flex; align-items: center; gap: 0.45rem; }
.bk-legend i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.bk-legend .sw-open { background: rgba(18, 48, 63, 0.05); border: 1px solid var(--line-2); }
.bk-legend .sw-bkd { background: rgba(23, 96, 126, 0.70); border: 1px solid var(--ocean); }
.bk-legend .sw-now { background: var(--ocean-deep); }
.bk-board .bk-foot {
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  color: var(--faint); font-size: 0.83rem; line-height: 1.5;
}

/* the hero eyebrow is the product name, so it gets its own read. the crumbs above
   it stay the faint grey trail, this one goes ocean and a touch heavier so the two
   mono lines don't blur into one block. ocean on sand measures 5.7:1. */
.hero .eyebrow { color: var(--ocean); font-weight: 600; }

/* the hero sub line carries the weight, the line under it fills in the detail */
.hero p.bk-sub { color: var(--text); font-size: 1.15rem; margin-bottom: 0.9rem; }
.hero p.bk-hero-desc { font-size: 1rem; }
.bk-note-sm { color: var(--faint); font-size: 0.87rem; margin: 1.1rem 0 0; max-width: 34rem; }

/* ---------- the three differences, a ledger not three cards ---------- */
.bk-diffs { border-top: 1px solid var(--line); }
.bk-diff {
  display: grid; grid-template-columns: 210px 1fr; gap: 1rem 2.5rem;
  padding: 32px 0; border-bottom: 1px solid var(--line);
}
.bk-diff .lbl {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ocean); padding-top: 0.45rem;
}
.bk-diff h3 { font-size: 1.45rem; font-weight: 800; margin-bottom: 0.5rem; }
.bk-diff p { color: var(--muted); margin: 0; max-width: 46rem; }
.bk-people { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin-top: 1.1rem; }
.bk-people .who { display: flex; align-items: baseline; gap: 0.6rem; }
.bk-people .who b { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.95rem; }
.bk-people .who a { font-family: var(--mono); font-size: 0.85rem; }

/* ---------- the feature sheet ---------- */
.bk-sheet-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 2.6rem 0 0.9rem;
}
.bk-sheet-head:first-of-type { margin-top: 0; }
.bk-sheet-head h3 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.bk-sheet-head span { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }

.bk-spec { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.bk-spec .row {
  display: grid; grid-template-columns: 230px 1fr auto; gap: 0.35rem 1.6rem;
  align-items: baseline; padding: 15px 22px; border-bottom: 1px solid var(--line);
}
.bk-spec .row:last-child { border-bottom: 0; }
.bk-spec .row:nth-child(odd) { background: var(--wash); }
.bk-spec .nm {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.bk-spec .ds { color: var(--text); font-size: 0.97rem; }
.bk-spec .st { font-family: var(--mono); font-size: 0.73rem; color: var(--up); white-space: nowrap; }
.bk-spec .st.later { color: var(--ocean); }

/* ---------- the two callouts ---------- */
.bk-callout {
  margin: 1.25rem 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 28px 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 1.4rem 2.5rem; align-items: center;
}
.bk-callout h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.45rem; }
.bk-callout p { color: var(--muted); margin: 0; max-width: 44rem; }

/* ---------- the two product cards ---------- */
.bk-plan { max-width: none; display: flex; flex-direction: column; }
.bk-plan .badge-soft { align-self: flex-start; }
.bk-plan ul { margin-bottom: 1.6rem; }
.bk-plan-note {
  margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 0.9rem;
}

/* ---------- the rate card ---------- */
.bk-rates-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--void); }
.bk-rates { width: 100%; border-collapse: collapse; }
.bk-rates th, .bk-rates td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.bk-rates thead th {
  font-family: var(--mono); font-weight: 500; font-size: 0.71rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
  background: var(--panel-2);
}
.bk-rates tbody tr:nth-child(odd) td { background: var(--wash); }
.bk-rates tbody tr:last-child td { border-bottom: 0; }
.bk-rates .rooms { font-family: var(--mono); font-size: 0.88rem; color: var(--text); white-space: nowrap; }
.bk-rates .amt { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--brass); }
.bk-rates .amt.quote { font-family: var(--mono); font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.bk-rates .up { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.bk-vary { color: var(--faint); font-size: 0.92rem; margin: 1.1rem 0 0; max-width: 44rem; }

.bk-terms { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; }
.bk-terms li { display: flex; gap: 0.75rem; color: var(--muted); font-size: 0.97rem; }
.bk-terms li b { color: var(--text); font-weight: 600; }
.bk-terms .mark { color: var(--ocean); font-family: var(--mono); flex-shrink: 0; }

/* ---------- the one-time lines ---------- */
.bk-lines { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.bk-lines .ln { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.5rem; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.bk-lines .ln:last-child { border-bottom: 0; }
.bk-lines .ln:nth-child(odd) { background: var(--wash); }
.bk-lines .nm { font-weight: 600; }
.bk-lines .amt { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.05rem; white-space: nowrap; color: var(--brass); }
.bk-lines .ds { grid-column: 1 / -1; color: var(--muted); font-size: 0.93rem; }
.bk-col h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; }
.bk-col > p { color: var(--muted); font-size: 0.93rem; }

/* ---------- where reservations come from, and where they land ---------- */
.bk-flow { display: grid; justify-items: start; gap: 0; }
.bk-flow .sources { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bk-flow .sources span {
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem; background: var(--wash);
}
.bk-flow .rail {
  width: 1px; height: 40px; margin: 0 0 0 26px;
  background: linear-gradient(to bottom, rgba(124, 195, 230, 0.15), rgba(23, 96, 126, 0.75));
}
.bk-flow .sink {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel); padding: 0.85rem 1.4rem;
  font-family: var(--mono); font-size: 0.82rem; color: var(--text);
  display: flex; align-items: center; gap: 0.6rem;
}
.bk-sync-copy { color: var(--muted); margin: 1.2rem 0 0; }
.bk-sync-note { color: var(--faint); font-size: 0.92rem; margin: 1.2rem 0 0; }

.bk-demo .card { display: flex; flex-direction: column; }
.bk-demo .card p { flex-grow: 1; }
.bk-demo .card .btn { margin-top: 1.35rem; align-self: flex-start; }

/* ---------- money is brass everywhere it appears ---------- */
.trust .stat strong { color: var(--brass); }
.price b { color: var(--brass); }

@media (max-width: 940px) {
  .bk-terms { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .bk-diff { grid-template-columns: 1fr; gap: 0.55rem; padding: 26px 0; }
  .bk-diff .lbl { padding-top: 0; }
  .bk-spec .row { grid-template-columns: 1fr auto; gap: 0.3rem 1rem; }
  .bk-spec .nm { grid-column: 1; grid-row: 1; }
  .bk-spec .st { grid-column: 2; grid-row: 1; }
  .bk-spec .ds { grid-column: 1 / -1; }
  .bk-callout { grid-template-columns: 1fr; padding: 26px 22px; }
  .bk-callout .btn { justify-self: start; }
}

@media (max-width: 720px) {
  /* the rate card stops being a table and becomes one block per room band,
     so nobody has to pinch and drag it sideways on a phone */
  .bk-rates, .bk-rates tbody, .bk-rates tr, .bk-rates td { display: block; width: 100%; }
  .bk-rates thead { display: none; }
  .bk-rates tbody tr { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .bk-rates tbody tr:last-child { border-bottom: 0; }
  .bk-rates tbody tr:nth-child(odd) td { background: transparent; }
  .bk-rates td {
    border-bottom: 0; padding: 7px 18px;
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  }
  .bk-rates td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--faint);
  }
  .bk-rates tbody tr td.rooms {
    background: var(--panel-2);
    padding: 11px 18px; margin-bottom: 4px;
    font-size: 0.95rem;
  }
  .bk-rates .amt { font-size: 1.15rem; }
}