/* calas-ui.css — Calas Automations shared UI: brand font + one button system.
   Loaded LAST on every page so it unifies fonts and button edging site-wide.
   Blue #155F87 primary, gold #F0C171 hairline, IBM Plex Sans body / Libre Baskerville headings. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&family=Libre+Baskerville:wght@400;700&display=swap');

:root{--accent:#155F87;--accent-2:#0E4A6B;--gold:#F0C171}

/* Brand base font everywhere (headings keep their own serif via their own rules) */
body{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* --- One button look on EVERY page: same font, same edging --- */
button,.btn,a.btn,input[type=submit],input[type=button]{
  font-family:"IBM Plex Sans",system-ui,sans-serif !important;
  border-radius:6px !important;
  letter-spacing:.01em;
}

/* The standard marketing button class: full canonical spec */
.btn{
  display:inline-block;
  font-weight:600;
  font-size:17px;
  line-height:1.2;
  padding:12px 22px;
  border:1.5px solid transparent;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--accent-2)}

/* Secondary / ghost buttons — solid white with blue text, works on light and dark */
.btn.ghost,.btn.secondary,.btn-ghost,.btn.outline{
  background:#fff !important;
  color:var(--accent) !important;
  border:1.5px solid rgba(21,95,135,.35) !important;
}
.btn.ghost:hover,.btn.secondary:hover,.btn-ghost:hover,.btn.outline:hover{
  background:rgba(21,95,135,.06) !important;
}

/* Header nav CTA (Book 15 minutes) matches the button system */
.nav-cta{
  font-family:"IBM Plex Sans",sans-serif !important;
  border-radius:6px !important;
  font-weight:600;
}

/* --- Shared crest masthead for app / utility screens (injected by calas-brandbar.js
   only on pages that don't already have the marketing masthead) --- */
.cbar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #DCE6ED;font-family:"IBM Plex Sans",system-ui,sans-serif}
.cbar::after{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cbar .cbar-in{max-width:1060px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cbar .lock{display:flex;align-items:center;gap:12px;text-decoration:none}
.cbar .crest{width:26px;height:36px;flex:none;background:var(--accent);
  -webkit-mask:url(/favicon.png) center/contain no-repeat;mask:url(/favicon.png) center/contain no-repeat;
  animation:cbarflip 6s linear infinite}
@keyframes cbarflip{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.cbar .crest{animation:none}}
.cbar .name{font-family:"Libre Baskerville",Georgia,serif;font-size:19px;font-weight:700;color:var(--accent);line-height:1;letter-spacing:-.01em}
.cbar .sub{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.24em;color:#6B7883;margin-top:3px;border-top:1.5px solid var(--accent);padding-top:3px}
.cbar nav{display:flex;align-items:center;gap:14px;font-size:16px;flex-wrap:wrap}
.cbar nav a{text-decoration:none;color:#4E5B66}
.cbar nav a:hover{color:var(--accent)}
.cbar .nav-cta{background:var(--accent) !important;color:#fff !important;padding:9px 16px;border-radius:6px !important;font-weight:600}
.cbar .nav-cta:hover{background:var(--accent-2) !important}
@media(max-width:760px){.cbar .cbar-in{padding:10px 16px}.cbar nav{gap:12px;font-size:15.5px}}

/* --- Card hover-lift: gentle raise + soft shadow on the product/segment/pricing cards --- */
.card,.tier,.seg,.segment,.product-card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover,.tier:hover,.seg:hover,.segment:hover,.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(18,33,44,.10);
}

/* --- On File-style hero lockup: light-blue spinning crest + two-tone wordmark, for dark hero bands.
   Reuse on every product hero for one consistent brand across the site. --- */
@keyframes ofspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.of-lockup{display:inline-flex;align-items:center;gap:14px;text-decoration:none;margin:0 0 14px}
.of-lockup .crest{width:34px;height:47px;flex:none;display:inline-block;background:#5FB3DD;
  -webkit-mask:url(/favicon.png) center/contain no-repeat;mask:url(/favicon.png) center/contain no-repeat;
  animation:ofspin 6s linear infinite}
@media(prefers-reduced-motion:reduce){.of-lockup .crest{animation:none}}
.of-lk-text{display:inline-block}
.of-lk-name{font-family:"Libre Baskerville",Georgia,serif;font-size:26px;font-weight:700;line-height:1;color:#B9CFDD;display:block}
.of-lk-name .r{color:#fff}
.of-lk-sub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.24em;color:#B9CFDD;margin-top:7px;display:block}

/* --- Reusable On File hero band: drop <section class="calas-hero"> on any page for the
   identical dark-navy hero (light-blue crest lockup + two-tone wordmark) sitewide. --- */
.calas-hero{background:#0B2E45;color:#fff;border-bottom:1px solid #1E4A66}
.calas-hero .calas-hero-in{max-width:1240px;margin:0 auto;padding:46px 26px 42px;box-sizing:border-box}
.calas-hero .eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;color:#4FA3D1;margin:0 0 8px}
.calas-hero h1{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;color:#fff;font-size:clamp(26px,3.6vw,38px);line-height:1.14;margin:6px 0 10px}
.calas-hero p{color:#B9CFDD;font-size:16.5px;line-height:1.5;max-width:640px;margin:0}
.calas-hero .of-lockup{margin:0 0 12px}

/* 2026-09-29 Dan: bigger header menu text on every page (was 13px).
   "header nav" outranks each page's own inline nav{font-size:16px}. The
   header row gets a little more width so the menu stays on one line. */
header .mast{max-width:1400px}
header nav,.cbar nav{font-size:17.5px;gap:16px;flex-wrap:nowrap}
header nav .nav-cta,.cbar .nav-cta{font-size:16px;white-space:nowrap;padding:9px 14px}
header nav a,.cbar nav a{white-space:nowrap}
@media(max-width:1400px){header .mast{padding-left:22px;padding-right:22px;gap:14px}header nav,.cbar nav{gap:11px}header nav .nav-cta,.cbar .nav-cta{padding:9px 12px}}
@media(max-width:1240px){header nav,.cbar nav{flex-wrap:wrap}}
@media(max-width:760px){header nav,.cbar nav{font-size:16px;gap:12px}}

/* 2026-09-29 Dan: the home page hero on every page. Pages that don't already
   carry the home photo (.hero-art) get the same photo and the same navy
   shading behind their own title. Selector outranks each page's own .hero. */
.hero:not(:has(> .hero-art)),.calas-hero{
  position:relative;overflow:hidden;background-color:#0B2E45;
  background-image:
    linear-gradient(180deg,rgba(11,46,69,.55) 0%,rgba(11,46,69,.28) 45%,rgba(11,46,69,.78) 100%),
    linear-gradient(95deg,rgba(11,46,69,.8) 0%,rgba(11,46,69,.5) 40%,rgba(11,46,69,.2) 78%,rgba(11,46,69,.3) 100%),
    url(/hero-bg.jpg);
  background-size:cover;background-position:center}

/* 2026-09-29 Dan: even spacing. The menu links sit centred between the logo
   and the Sign in / Book buttons, with equal space on each side. */
header nav,.cbar nav{flex:1}
header nav > a:first-child,.cbar nav > a:first-child{margin-left:auto}
header nav .nav-signin,.cbar nav .nav-signin{margin-left:auto}

/* Guardian and app screens use the injected .cbar bar; match the main header
   width and the centred menu. "body" makes these win over older .cbar rules. */
body .cbar .cbar-in{max-width:1400px;padding:16px 40px;box-sizing:border-box;flex-wrap:nowrap}
body .cbar nav{flex:1;flex-wrap:nowrap}
@media(max-width:1400px){body .cbar .cbar-in{padding:16px 22px;gap:14px}}
@media(max-width:1240px){body .cbar .cbar-in,body .cbar nav{flex-wrap:wrap}}

/* 2026-09-30 Dan: soft rounded light-blue (#5FB3DD) hover "pill" behind the
   header AND footer menu links, every page. Sign in / Book 15 minutes keep
   their own look. Links carry the padding + radius at rest (transparent) so the
   box appears on hover with no layout shift; a small negative margin keeps the
   row width tight. Covers the marketing header, the injected .cbar header, and
   the shared .cfoot footer. */
header nav a:not(.nav-signin):not(.nav-cta),
body .cbar nav a:not(.nav-signin):not(.nav-cta){
  padding:5px 7px;border-radius:9px;
  transition:background .15s ease,color .15s ease;
}
.cfoot nav a{
  padding:5px 10px;border-radius:9px;
  transition:background .15s ease,color .15s ease;
}
/* close the row gap so the pills' own padding doesn't push the menu wider */
header nav,body .cbar nav{gap:1px}
header nav a:not(.nav-signin):not(.nav-cta):hover,
body .cbar nav a:not(.nav-signin):not(.nav-cta):hover,
.cfoot nav a:hover{
  background:rgba(95,179,221,.18) !important;
  color:#155F87 !important;
}

/* 2026-10-01 Dan: on phones the header links stacked into a tall column on
   every page with its own .mast header. Now: logo on top, then one row of
   links you swipe left/right. Wide tables scroll inside their own box
   instead of pushing the page wider than the screen. */
@media(max-width:760px){
  header .mast{flex-wrap:wrap;padding:10px 14px 0;gap:4px}
  header .mast nav{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:2px;font-size:15px;padding:2px 28px 10px 18px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 88%,transparent)}
  header .mast nav::-webkit-scrollbar{display:none}
  header .mast nav a{flex:none}
  header .mast nav > a:first-child,header .mast nav .nav-signin{margin-left:0}
  header .mast nav .nav-signin,header .mast nav .nav-cta{padding:6px 12px;font-size:14.5px}
  section table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Pricing cards: let a long price line wrap instead of widening the card */
  .plans{grid-template-columns:minmax(0,1fr)}
  .plans .price{flex-wrap:wrap}
  /* long web addresses in body text break instead of running off the screen */
  main p a{overflow-wrap:anywhere}
}


/* === Unified Higgsfield hero (Calas) — added 2026-10-02 === */
.hero,.hero-vis{position:relative;overflow:hidden;background-color:#0B2E45;color:#eaf2f7;isolation:isolate}
.hero .hero-art,.hero-vis .hero-art{position:absolute;inset:0;z-index:0;background:url(/hero-home.jpg) center 40%/cover no-repeat}
.hero .hero-overlay,.hero-vis .hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,46,69,.50),rgba(11,46,69,.20) 45%,rgba(11,46,69,.78) 100%),
             linear-gradient(95deg,rgba(11,46,69,.82),rgba(11,46,69,.44) 45%,rgba(11,46,69,.12) 85%)}
.hero>*:not(.hero-art):not(.hero-overlay),.hero-vis>*:not(.hero-art):not(.hero-overlay){position:relative;z-index:2}
/* unify any existing inline hero-art to the shared image */
.hero-art{background-image:url(/hero-home.jpg)!important}
/* keep hero text legible on the cinematic art */
.hero :is(h1,h2,h3,p,li),.hero-vis :is(h1,h2,h3,p,li){color:#eef4f8}
.hero a:not(.btn):not(.nav-cta),.hero-vis a:not(.btn):not(.nav-cta){color:#cfe6f4}

/* a11y: skip-to-content link (injected by calas-brandbar.js) */
.calas-skip{position:absolute;left:-9999px;top:0;background:#155F87;color:#fff;padding:10px 16px;border-radius:0 0 6px 0;z-index:2147483647;text-decoration:none;font:600 14px/1 "IBM Plex Sans",system-ui,sans-serif}
.calas-skip:focus{left:0;top:0}
html{scroll-padding-top:90px}
@media(prefers-reduced-motion:reduce){.card,.tier,.seg,.segment,.product-card{transition:none}}