/* GoLine1 public site: the one design system every page builds on.

   Colour has one job each. Blue is the primary action ("Hear a sample call") and nothing else.
   Teal is for secondary actions and links. Navy is text. Everything else is neutral, so a visitor
   can always tell which button the page wants them to press.

   Cascade layers replace the old specificity contests (html:root ...): a page file wins over a
   shared component because its layer is later, not because its selector is longer. The demo
   player's legacy styles sit in the last layers. Styles outside any layer (a new component file
   that has not opted in) still win over all of these, which is how CSS layers work. */
@layer base, components, page, player-base, player;

@font-face {
  font-family: Manrope;
  src: url("assets/manrope-regular.woff2") format("woff2"), url("assets/manrope-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/manrope-bold.woff2") format("woff2"), url("assets/manrope-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Neutrals. Text colours are all at least 4.5:1 on white and on --bg-soft. */
  --ink: #101c2d;
  --text: #34424f;
  --muted: #52616d;
  --subtle: #66727f;
  --border: #dbe3e8;
  --border-strong: #7b8894;
  --bg: #fff;
  --bg-soft: #f4f7f9;

  /* Primary: the one main action. White text on it is 5.9:1. */
  --primary: #2457e6;
  --primary-hover: #1c48c8;
  --primary-active: #173aa6;
  --primary-tint: #eaf0ff;

  /* Secondary actions and links. 6.3:1 on white. */
  --secondary: #006b70;
  --secondary-hover: #00555a;
  --secondary-tint: #e8f4f4;

  --success: #1d6b45;
  --success-tint: #e9f5ee;
  --warn: #8a4b00;
  --warn-tint: #fff4e0;
  --danger: #b3261e;
  --danger-tint: #fdecea;

  --focus: #2457e6;
  --focus-on-dark: #a9c0ff;

  /* Type */
  --font: Manrope, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: clamp(22px, 2vw, 26px);
  --fs-2xl: clamp(26px, 2.8vw, 34px);
  --fs-3xl: clamp(34px, 4.2vw, 52px);
  --fs-4xl: clamp(38px, 5vw, 64px);
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --measure: 70ch;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(48px, 6vw, 80px);
  --gutter: clamp(16px, 4vw, 56px);
  --wrap-max: 1264px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px #101c2d0f;
  --shadow-md: 0 12px 32px #101c2d14;

  --tap: 44px;
  color-scheme: light;

  /* Names the demo player's legacy rules still read. */
  --paper: var(--bg);
  --navy: var(--ink);
  --blue: var(--secondary);
  --rule: var(--border);
  --accent-soft: var(--secondary-tint);
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 var(--fs-base) / var(--lh-body) var(--font);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, p { margin: 0; }
  h1, h2, h3, h4 { color: var(--ink); font-weight: 700; }
  h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.025em; }
  h2 { font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -.02em; }
  h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: -.01em; }
  h4 { font-size: var(--fs-base); line-height: var(--lh-snug); }
  button, input, textarea, select { font: inherit; }
  button, a, input, summary, textarea, select { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  button:disabled { cursor: wait; }
  a { color: inherit; text-decoration: none; }
  img, svg { max-width: 100%; vertical-align: middle; }
  code { font-family: var(--font-mono); font-size: .92em; }
  ::selection { background: #d8e3ff; color: var(--ink); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  [hidden] { display: none !important; }

  /* Links inside running text are underlined; links styled as actions carry a class. */
  main :is(p, li, dd, td) a:not([class]) {
    color: var(--secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  main :is(p, li, dd, td) a:not([class]):hover { color: var(--secondary-hover); text-decoration-thickness: 2px; }

  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); margin-inline: auto; }
  .visually-hidden, .sec-visually-hidden, .demo-visually-hidden, .pilot-visually-hidden, .sr-only {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .skip-link {
    position: fixed; z-index: 100; top: 8px; left: 8px;
    padding: 12px 20px; border-radius: var(--radius-sm);
    background: var(--ink); color: #fff; font-weight: 700;
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: none; }
}

@layer components {
  /* ---- Australia banner ---- */
  .au-banner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 44px; margin: 0; padding: 8px 16px;
    background: var(--secondary-tint); border-bottom: 1px solid #cbdedc;
    color: var(--ink); font: 700 var(--fs-sm) / 1.4 var(--font);
  }
  .au-banner img { display: block; width: 40px; height: 20px; flex: none; border-radius: 2px; }
  .au-banner span { min-width: 0; text-align: center; }

  /* ---- Header and navigation ---- */
  .site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--border); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 76px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); flex-shrink: 0; color: var(--ink); }
  .brand img { width: 40px; height: auto; }
  .brand span { font-size: var(--fs-base); font-weight: 700; letter-spacing: .04em; }
  .site-nav { display: flex; align-items: center; gap: var(--space-1); font-size: 15px; }
  .site-nav > a:not(.button) {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px;
    color: var(--ink); border-radius: var(--radius-sm);
    text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px;
    transition: text-decoration-color .15s, color .15s;
  }
  .site-nav > a:not(.button):hover { color: var(--secondary); text-decoration-color: currentColor; }
  .site-nav > a[aria-current="page"]:not(.button) { color: var(--secondary); font-weight: 700; text-decoration-color: currentColor; }
  .site-nav > .button { margin-left: var(--space-3); }
  .header-demo, .nav-toggle { display: none; }

  /* ---- Buttons and links ---- */
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px;
    border: 1px solid var(--primary); border-radius: 8px;
    background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
  }
  .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
  .button:active { background: var(--primary-active); border-color: var(--primary-active); }
  .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .button:disabled { opacity: .7; }
  .button svg { width: 18px; height: 18px; flex-shrink: 0; }
  .button-small { min-height: var(--tap); padding: 10px 16px; font-size: var(--fs-sm); }
  /* Secondary actions: outlined in teal, never filled, so blue stays the page's one main action. */
  .button-secondary, .button-outline {
    background: var(--bg); border-color: var(--secondary); color: var(--secondary);
  }
  .button-secondary:hover, .button-outline:hover { background: var(--secondary-tint); border-color: var(--secondary-hover); color: var(--secondary-hover); }
  .button-secondary:active, .button-outline:active { background: #d4ebeb; }
  .text-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
    color: var(--secondary); font-size: 15px; font-weight: 700;
    text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px;
  }
  .text-link:hover { color: var(--secondary-hover); text-decoration-color: currentColor; }
  .text-link svg { width: 18px; height: 18px; flex-shrink: 0; }

  .eyebrow { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; line-height: 1.5; }
  .serif-word { color: var(--muted); }

  /* ---- Sections ---- */
  .product-section { padding-block: var(--section-y); }
  .product-section + .product-section { border-top: 1px solid var(--border); }
  .product-section > h2 { margin-bottom: var(--space-5); max-width: 28ch; }
  .product-section > p { max-width: var(--measure); }
  .product-section > p + p { margin-top: var(--space-3); }
  .product-lead { margin-top: var(--space-4); max-width: 62ch; color: var(--text); font-size: var(--fs-md); line-height: 1.6; }
  .product-section > .product-lead { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
  .product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
  .product-close { padding-block: var(--space-8); background: var(--bg-soft); border-top: 1px solid var(--border); }
  .product-close > .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
  .product-close h2 { max-width: 24ch; }
  .product-close p { margin-top: var(--space-2); max-width: 56ch; }
  .product-close .product-actions { flex-shrink: 0; margin: 0; }

  .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }

  /* ---- Page heading on inner pages ---- */
  .page-hero { padding-top: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
  .page-hero h1 { margin-top: var(--space-2); max-width: 22ch; }
  .page-hero .intro { margin-top: var(--space-4); max-width: 62ch; color: var(--text); font-size: var(--fs-md); line-height: 1.6; }
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 4px; margin-inline: -4px; color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }

  /* ---- Questions ---- */
  .faq-list { max-width: 880px; }
  .faq-list details { border-bottom: 1px solid var(--border); }
  .faq-list details:first-child { border-top: 1px solid var(--border); }
  .faq-list summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
    min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer;
    color: var(--ink); font-size: var(--fs-base); font-weight: 700;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary > span { color: var(--secondary); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s; }
  .faq-list details[open] summary > span { transform: rotate(45deg); }
  .faq-list details > p { max-width: var(--measure); padding-bottom: var(--space-5); font-size: 15px; }

  /* ---- Caveats: one style, one line, details in a disclosure ---- */
  .note { margin-top: var(--space-4); max-width: var(--measure); color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
  .note a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
  .disclosure { max-width: var(--measure); margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
  .disclosure > summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
    color: var(--secondary); font-weight: 700; list-style: none; cursor: pointer;
  }
  .disclosure > summary::-webkit-details-marker { display: none; }
  .disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
  .disclosure[open] > summary::before { transform: rotate(45deg); }
  .disclosure > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
  .disclosure > :not(summary) { margin: 0 0 var(--space-2); padding-left: 15px; }
  .disclosure a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
  /* For a statement that must be seen before anything else on the page. */
  .notice { padding: 12px 16px; border: 1px solid #f0d3a6; border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-tint); color: var(--ink); font-size: var(--fs-sm); line-height: 1.55; }

  /* ---- Forms ---- */
  .field { display: grid; gap: 6px; align-content: start; }
  .field label, .label { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
  .field label span { color: var(--muted); font-weight: 400; }
  .field input, .field select, .field textarea, .input {
    width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--bg); color: var(--ink); font-size: var(--fs-base);
    transition: border-color .15s;
  }
  .field textarea { min-height: 120px; resize: vertical; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible { border-color: var(--primary); outline: 3px solid var(--focus); outline-offset: 1px; }
  .field ::placeholder { color: var(--subtle); opacity: 1; font-style: italic; }
  .field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
  .field-hint { color: var(--muted); font-size: var(--fs-xs); }
  .field-error { display: flex; gap: 6px; color: var(--danger); font-size: var(--fs-sm); font-weight: 700; }
  .field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; line-height: 1; }
  .field-error:empty { display: none; }
  .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .form-status:empty { display: none; }
  .form-status { padding: 12px 16px; border-left: 4px solid var(--secondary); border-radius: var(--radius-sm); background: var(--secondary-tint); color: var(--ink); font-size: var(--fs-sm); }

  /* ---- Long-form legal text ---- */
  .legal { max-width: 780px; padding-top: var(--space-4); padding-bottom: var(--space-8); }
  .legal section, .legal ~ .product-section { border-top: 1px solid var(--border); padding-block: var(--space-6); }
  .legal h2 { font-size: var(--fs-xl); }
  .legal p, .legal li { margin-top: var(--space-3); font-size: var(--fs-base); line-height: 1.75; }
  .legal ul { padding-left: 20px; }
  .legal a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
  .legal-note { padding: 16px 20px; border-left: 4px solid var(--secondary); background: var(--secondary-tint); font-size: var(--fs-sm); }

  /* ---- Footer ---- */
  .site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }
  .footer-top { display: flex; justify-content: space-between; gap: var(--space-7); padding-top: var(--space-7); padding-bottom: var(--space-6); }
  .footer-top p { margin-top: var(--space-2); max-width: 38ch; color: var(--muted); }
  .footer-links { display: flex; gap: var(--space-8); }
  .footer-links > div { display: flex; flex-direction: column; align-items: flex-start; }
  .footer-links .eyebrow { margin-bottom: var(--space-1); color: var(--ink); }
  .footer-links a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text); }
  @media (pointer: coarse) { .footer-links a, .footer-bottom a { min-height: var(--tap); } }
  .footer-links a:hover, .footer-bottom a:hover { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-block: var(--space-3) var(--space-5); border-top: 1px solid var(--border); font-size: var(--fs-xs); }
  .footer-bottom > div { display: flex; flex-wrap: wrap; column-gap: var(--space-3); }
  .footer-bottom > div a { justify-content: center; min-width: var(--tap); padding-inline: 6px; }
  .footer-country { display: inline-flex; align-items: center; gap: 8px; }

  @media (max-width: 850px) {
    .header-inner { gap: var(--space-2); min-height: 68px; }
    .header-demo {
      display: inline-flex; align-items: center; min-height: var(--tap); margin-left: auto; padding: 0 16px;
      border: 1px solid var(--primary); border-radius: 8px; background: var(--primary); color: #fff;
      font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; white-space: nowrap;
    }
    .header-demo:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
    .nav-toggle {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      width: var(--tap); height: var(--tap); flex: none; padding: 0;
      border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg);
    }
    .nav-toggle span { width: 18px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .2s; }
    .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .site-nav {
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: var(--space-2) var(--gutter) var(--space-5);
      background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
      font-size: var(--fs-base);
    }
    .site-nav.is-open { display: flex; }
    .site-nav > a:not(.button) { min-height: 52px; padding: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
    .site-nav > .button { margin: var(--space-4) 0 0; }
    .product-close > .wrap { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .footer-top { flex-direction: column; gap: var(--space-5); }
  }
  @media (max-width: 600px) {
    .au-banner { gap: 10px; font-size: var(--fs-xs); }
    .au-banner img { width: 34px; height: 17px; }
    .brand img { width: 36px; }
    .product-actions { flex-direction: column; align-items: stretch; }
    .product-actions .button { width: 100%; }
    .product-actions .text-link { justify-content: center; }
    .form-row { grid-template-columns: 1fr; }
    .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
    .footer-links a, .footer-bottom a { min-height: var(--tap); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-bottom > div { column-gap: var(--space-2); margin-inline: -6px; }
  }
  @media (max-width: 360px) {
    .brand span { display: none; }
    .header-demo { padding: 0 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button, .site-nav > a, .text-link, .faq-list summary > span, .nav-toggle span { transition: none; }
  }
  @media print {
    .au-banner, .site-header, .site-footer, .skip-link { display: none; }
  }
}