/* ==========================================================================
   Pharos Hotel Assistant — marketing site
   Palette follows the product (green + navy), not the document templates.
   ========================================================================== */

/* Figtree, served from our own domain. Deliberately not loaded from Google:
   fonts.googleapis.com would send every visitor's IP address to Google, which
   needs consent in the EU. The files are downloaded copies of the Google Fonts
   originals (SIL Open Font License) — see README.

   This is the variable font across the whole 300–900 range, not fixed weights,
   because the interface uses in-between weights (520, 620, 640, 660, 680) that
   static instances would snap to the nearest 100. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --green:        #2E7D6B;
  --green-deep:   #256355;
  --green-tint:   #EAF2EF;
  --navy:         #1F3B4D;
  --grey:         #5A6672;
  --bg:           #F7F8F8;
  --surface:      #FFFFFF;
  --hairline:     #E3E7E9;
  --amber:        #C07C34;

  --measure: 34rem;
  --radius: 14px;
  --radius-lg: 22px;

  --step--1: clamp(0.86rem, 0.84rem + 0.1vw, 0.92rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.7vw, 1.95rem);
  /* Sans headings carry more weight than a serif at the same size, so the two
     display steps sit a little smaller than they did. */
  --step-3:  clamp(1.72rem, 1.5rem + 1.1vw, 2.3rem);
  --step-4:  clamp(2.1rem, 1.72rem + 1.85vw, 3.2rem);

  --shadow: 0 12px 32px -18px rgba(31, 59, 77, .28);

  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D6B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  --icon-cross: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6672' stroke-width='3.4' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* One typeface across the whole site. Headings are separated from body text by
   weight and tracking, not by a second family. */
h1, h2, h3 {
  font-family: inherit;
  font-weight: 680;
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.032em; }
h2 { font-size: var(--step-3); }
h3 {
  font-size: var(--step-1);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--green-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

::selection { background: var(--green-tint); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- layout -- */

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 52rem); }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Anchor targets sit under a sticky header, so jumping to one has to stop
   short of it or the heading lands behind the bar. */
:target, section[id] { scroll-margin-top: 5rem; }
.section-line { border-top: 1px solid var(--hairline); }
.bg-white { background: var(--surface); }
.bg-navy { background: var(--navy); color: #EEF3F5; }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: #C6D4DC; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 640;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1rem;
}
.bg-navy .eyebrow { color: #7FC0AD; }

.lead { font-size: var(--step-1); color: var(--grey); line-height: 1.5; }
.bg-navy .lead { color: #BFD0D9; }
.muted { color: var(--grey); }
.small { font-size: var(--step--1); }

.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 248, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }

/* Wordmark: same typeface as the headings, one step heavier than nav links.
   The name itself stays live HTML text (site.config.js), never baked into the
   SVG, so renaming the company still means changing one value. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1;
  letter-spacing: -.021em;
  color: var(--navy);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark {
  width: 1.85rem; height: 1.85rem;
  flex: none;
  border-radius: 9px;
  background: var(--green);
  display: grid; place-items: center;
  color: #fff;
}
.brand__mark svg { width: 1.15rem; height: 1.15rem; display: block; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--navy); text-decoration: none; font-size: .97rem; font-weight: 520; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green-deep); }
.nav a[aria-current="page"] { font-weight: 640; }

.nav-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: .5rem .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--navy);
  cursor: pointer;
}

@media (max-width: 55rem) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 100% 1.25rem auto 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .4rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .7rem .8rem; border-radius: 9px; }
  .nav .btn { margin-top: .3rem; justify-content: center; }
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--surface); border-color: #CFD6DA; color: var(--navy); }
.bg-navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.bg-navy .btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--block { width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ------------------------------------------------------------------ hero -- */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero p.lead { max-width: 32rem; }
.hero__note { font-size: var(--step--1); color: var(--grey); margin-top: 1.4rem; }

/* --------------------------------------------------------------- devices -- */

.device {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.device + .device { margin-top: 1.1rem; }
.device__bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--hairline);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: #FCFDFD;
}
.device__bar .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); flex: none; }
.device__bar .device__meta { margin-left: auto; font-weight: 500; color: var(--grey); font-size: .78rem; }
.device__body { padding: 1rem; display: grid; gap: .6rem; }

.bubble {
  max-width: 84%;
  padding: .62rem .85rem;
  border-radius: 14px;
  font-size: .93rem;
  line-height: 1.5;
}
.bubble--guest { background: var(--navy); color: #fff; justify-self: end; border-bottom-right-radius: 5px; }
.bubble--bot { background: var(--green-tint); color: var(--navy); border-bottom-left-radius: 5px; }
.bubble small { display: block; margin-top: .3rem; font-size: .74rem; opacity: .72; }

.ticket {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .85rem .95rem;
  background: var(--surface);
  display: grid;
  gap: .45rem;
}
.ticket__head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ticket__room { font-weight: 680; font-size: .95rem; }
.ticket__body { font-size: .92rem; color: var(--navy); margin: 0; max-width: none; }
.ticket__foot { font-size: .78rem; color: var(--grey); display: flex; gap: .9rem; flex-wrap: wrap; }

.tag {
  font-size: .72rem;
  font-weight: 640;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-deep);
  white-space: nowrap;
}
.tag--open { background: #FBF0E2; color: var(--amber); }
.tag--urgent { background: #FBE9E8; color: #A33F3B; }
.tag--neutral { background: #EEF1F3; color: var(--grey); }

/* ----------------------------------------------------- product screenshots -- */
/* Real captures of the live widget and dashboard. Framed like the device mocks
   so the two read as one family. */

.shot { margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.shot figcaption {
  margin-top: .7rem;
  font-size: var(--step--1);
  color: var(--grey);
}
.bg-navy .shot figcaption { color: #A9BDC7; }

/* The chat capture is tall. Crop it to a window rather than scaling the whole
   thing down, so the text stays readable. The top of a conversation is the
   part that matters. */
.shot--phone { display: flex; flex-direction: column; align-items: start; }
.shot--phone img {
  width: 100%;
  max-width: 23rem;
  height: 31rem;
  object-fit: cover;
  object-position: top center;
}

/* Full conversation, uncropped, but held to a phone's width so it does not
   dominate the section it sits in. */
.shot--tall img { max-width: 21rem; height: auto; }

.shot-pair { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 56rem) {
  /* The dashboard is much shorter than the conversation; centring it against
     the taller pane reads better than leaving it stranded at the top. */
  .shot-pair {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
  }
}
/* The chat pane runs uncropped here: the whole point of the pairing is the
   last message, where the request is logged and the reference appears. Held to
   a phone's width so the column stays believable. */
.shot-pair .shot:first-child img { max-width: 20rem; height: auto; }

/* ----------------------------------------------------------------- cards -- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--grey); font-size: .97rem; }
.bg-white .card { background: #FBFCFC; }
.bg-navy .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }

/* Secondary text inside a card on the navy band has to lighten, not darken:
   the default grey is unreadable there. White callouts keep the dark grey. */
.bg-navy .card .muted,
.bg-navy .card .hint { color: #A2B6C1; }

.step__num {
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-deep);
  display: grid; place-items: center;
  font-weight: 680; font-size: .95rem;
  margin-bottom: .9rem;
}

.props { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.props li {
  padding: 1.5rem 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: .35rem 2rem;
}
.props li:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 46rem) {
  .props li { grid-template-columns: 18rem 1fr; align-items: start; }
}
.props h3 { margin: 0; }
.props p { margin: 0; color: var(--grey); max-width: 42rem; }

.stats {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 1.35rem 1.25rem; }
.bg-navy .stats { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.bg-navy .stat { background: #24445A; }
.stat__value {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--green-deep);
  display: block;
  margin-bottom: .4rem;
}
.bg-navy .stat__value { color: #7FC0AD; }
.stat__label { font-size: .88rem; color: var(--grey); line-height: 1.45; }
.bg-navy .stat__label { color: #BFD0D9; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

/* .list resets its own margin and is declared after .stack, so it would win on
   source order and collapse the space between two stacked lists. Restore it
   here, where the selector is specific enough to hold. */
.stack > .list { margin-top: 1.2rem; }
.stack > .list:first-child { margin-top: 0; }

/* The marker is positioned, not a grid cell. A list item mixing <strong> with
   loose text produces several anonymous boxes, and in a grid each one lands in
   its own cell — which pushed the trailing text into the icon column and broke
   it onto one word per line. Keeping the item a single flow avoids that. */
.list li {
  position: relative;
  padding-left: 1.65rem;
  font-size: .99rem;
}
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background-color: var(--green-tint);
  background-image: var(--icon-check);
  background-repeat: no-repeat;
  background-position: center;
  background-size: .72rem;
}
.list--no li::before {
  background-color: #F0F2F4;
  background-image: var(--icon-cross);
  background-size: .66rem;
}
.bg-navy .list li::before { background-color: rgba(127,192,173,.16); }

.callout {
  border-left: 3px solid var(--green);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.15rem 1.35rem;
  font-size: .97rem;
  color: var(--grey);
}
.callout p { max-width: 46rem; }
.callout strong { color: var(--navy); }

/* ------------------------------------------------------------------ demo -- */

.demo-panes { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .demo-panes { grid-template-columns: 1fr 1fr; } }
.pane { display: flex; flex-direction: column; min-height: 0; }
.pane__label { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.pane__label h3 { margin: 0; font-size: 1.02rem; }
.pane__label span { font-size: var(--step--1); color: var(--grey); }
.bg-navy .pane__label span { color: #A9BDC7; }
.pane__frame {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  height: 30rem;
}
.pane__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.demo-off {
  border: 1px dashed #CBD4D8;
  background: #FBFCFC;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.demo-off__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--amber);
  background: #FBF0E2;
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.demo-off video { border-radius: var(--radius); border: 1px solid var(--hairline); width: 100%; }

/* ----------------------------------------------------------------- prose -- */
/* Long-form documents: the privacy policy, and anything like it later. */

.prose { max-width: 40rem; }
.prose h2 { font-size: var(--step-2); margin-top: 3rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; }
.prose p, .prose li { color: var(--grey); }
.prose strong { color: var(--navy); }
.prose ul { margin: 0 0 1.1em; padding-left: 1.15rem; }
.prose li { margin-bottom: .45rem; }
.prose > p:first-child { margin-top: 0; }

.ptable-wrap { overflow-x: auto; margin: 1.25rem 0 1.6rem; }
.ptable {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .93rem;
}
.ptable th, .ptable td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--hairline);
}
.ptable th {
  font-weight: 640;
  color: var(--navy);
  border-bottom-color: #CFD6DA;
  white-space: nowrap;
}
.ptable td { color: var(--grey); }

/* ------------------------------------------------------------------ form -- */

.form { display: grid; gap: 1.05rem; }
@media (min-width: 40rem) {
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
}
.field { display: grid; gap: .35rem; }
.field label { font-size: .9rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .97rem;
  color: var(--navy);
  padding: .7rem .85rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  width: 100%;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: transparent;
}
.field .hint { font-size: .82rem; color: var(--grey); }
.form__status { font-size: .95rem; margin: 0; }
.form__status[data-state="error"] { color: #A33F3B; }
.form__status[data-state="ok"] { color: var(--green-deep); }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding-block: 3rem 2.5rem;
  font-size: .94rem;
}
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grey);
  margin: 0 0 .8rem;
  font-weight: 640;
  font-family: inherit;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--navy); text-decoration: none; }
.site-footer a:hover { color: var(--green-deep); text-decoration: underline; }
.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  color: var(--grey);
  font-size: .86rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 10px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }