/* Swiftime public-site foundations. See docs/design/public-site.md. */
:root {
  color-scheme: light;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --color-paper: #fffbf5;
  --color-surface: #fffefa;
  --color-ink: #30332f;
  --color-muted: #6e726a;
  --color-subtle: #7f8478;
  --color-line: #e7e4dc;
  --color-coral: #bd4b32;
  --color-coral-bright: #e66040;
  --color-peach: #f3e5d9;
  --color-sage: #e9ede3;
  --color-forest: #313b32;
  --color-sage-text: #c0c9ac;
  --color-oat: #f1efe7;
  --color-gold: #eac67f;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --site-width: 1184px;
  --reading-width: 68ch;
  --page-gutter: 32px;
  --shadow-preview: 0 16px 45px #7c563917;
  --ease: 180ms ease;
  /* Semantic aliases used by the homepage and existing product illustrations. */
  --background: var(--color-paper);
  --surface: var(--color-surface);
  --text: var(--color-ink);
  --body: var(--color-muted);
  --muted: var(--color-muted);
  --border: var(--color-line);
  --ink: var(--color-ink);
  --quiet: var(--color-muted);
  --paper: var(--color-paper);
  --line: var(--color-line);
  --coral: var(--color-coral);
  --brand-500: #ff6b4a;
  --brand-600: var(--color-coral);
  --accent-500: #ffd166;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-8); }
body { margin: 0; font-family: var(--font-sans); background: var(--color-paper); color: var(--color-ink); line-height: 1.6; }
h1,h2,h3,h4,p,ul,ol { margin: 0; }
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
button,summary { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-underline-offset: 4px; }
img,svg { vertical-align: middle; }
img { max-width: 100%; height: auto; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 3px solid var(--color-coral); outline-offset: 5px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 2000; background: var(--color-surface); color: var(--color-ink); padding: 15px 22px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: var(--site-width); margin: auto; padding: 22px var(--page-gutter); }
.site-brand { font-size: 26px; font-weight: 600; letter-spacing: -1.2px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.site-brand-mark { font-size: 25px; line-height: 1; color: #da8f63; }
.site-nav { position: relative; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #e6ddd399; border-radius: var(--radius-pill); background: #fffbf5e8; backdrop-filter: blur(16px); }
.site-nav > a, .site-menu > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px; font-size: 12px; font-weight: 500; text-decoration: none; border-radius: var(--radius-pill); white-space: nowrap; }
.site-nav > a:hover,.site-menu > summary:hover { background: var(--color-oat); }
.site-nav a[aria-current="page"] { color: var(--color-coral); background: #f3e5d980; }
.site-nav > .site-signup { background: var(--color-coral-bright); color: white; padding-inline: 19px; }
.site-nav > .site-signup:hover { background: var(--color-coral); }
.site-menu { position: static; }
.site-menu > summary { list-style: none; gap: 6px; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary::after { content: '⌄'; font-size: 14px; }
.site-menu[open] > summary { background: var(--color-oat); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 15px); width: 460px; max-height: 75vh; overflow-y: auto; padding: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border: 1px solid var(--color-line); background: var(--color-surface); box-shadow: 0 16px 40px #30392f15; border-radius: var(--radius-md); }
.menu-label { display: block; color: var(--color-muted); font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 10px; }
.menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; margin-inline: -10px; font-size: 12px; text-decoration: none; border-radius: var(--radius-sm); }
.menu-panel a:hover { background: var(--color-oat); color: var(--color-coral); }
.ds-kicker { font-size: 10px; font-weight: 500; letter-spacing: 1.7px; text-transform: uppercase; color: var(--color-coral); display: block; }
.ds-heading { font-size: clamp(36px,4.6vw,58px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; }
.ds-heading em { font-style: normal; color: var(--color-subtle); }
.ds-button,.cta-button,.card-cta,.cta-btn,.believer-page .cta { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 13px 23px; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--color-surface); background: var(--color-forest); font-size: 13px; font-weight: 500; text-decoration: none; transition: background var(--ease),transform var(--ease); }
.ds-button:hover,.cta-button:hover,.card-cta:hover,.cta-btn:hover,.believer-page .cta:hover { background: #485642; transform: translateY(-2px); }
.ds-button.secondary,.card-cta.secondary { background: transparent; border-color: #c4c9b9; color: var(--color-ink); }
.ds-button.secondary:hover,.card-cta.secondary:hover { background: var(--color-sage); }
.ds-text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 12px; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid #b5b8a8; }
.ds-text-link:hover { color: var(--color-coral); }
.ds-notice { padding: 22px 25px; background: var(--color-peach); border-radius: var(--radius-md); }
.ds-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; width: 100%; max-width: var(--site-width); padding: 80px var(--page-gutter); margin: 0 auto; }
.ds-faq-intro h2 { font-size: 37px; line-height: 1.2; font-weight: 500; letter-spacing: -1.5px; margin: 19px 0 16px; }
.ds-faq-intro p { font-size: 13px; color: var(--color-muted); line-height: 1.8; }
.ds-faq-list { min-width: 0; }
.ds-faq details { border-bottom: 1px solid var(--color-line); }
.ds-faq details:first-child { border-top: 1px solid var(--color-line); }
.ds-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; list-style: none; padding: 22px 0; font-size: 14px; font-weight: 500; line-height: 1.6; }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: '+'; font-size: 22px; color: var(--color-subtle); flex-shrink: 0; }
.ds-faq details[open] summary::after { content: '−'; }
.ds-faq details p { font-size: 13px; line-height: 1.9; color: var(--color-muted); padding: 0 24px 24px 0; }
.ds-faq details a { color: var(--color-coral); }
.ds-closing { text-align: center; margin: 32px 24px 0; padding: 58px 24px 64px; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 100%,#f8d8a9,transparent 70%),#f6e8d6; }
.ds-closing h2 { font-size: clamp(30px,4vw,46px); line-height: 1.15; font-weight: 500; letter-spacing: -.04em; margin: 20px 0 28px; }
.ds-closing .ds-kicker { color: #927053; }
.ds-closing > p { color: #816c55; font-size: 11px; margin-top: var(--space-4); }
.site-footer { max-width: var(--site-width); padding: 58px var(--page-gutter) 24px; margin: 0 auto; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 38px; }
.footer-brand p { font-size: 12px; color: var(--color-muted); line-height: 1.8; max-width: 190px; margin-top: 15px; }
.footer-group h2 { font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--color-muted); font-weight: 500; margin: 13px 0; }
.footer-group a,.footer-group button { display: flex; align-items: center; min-height: 38px; padding: 7px 0; font-size: 12px; color: var(--color-muted); text-decoration: none; }
.footer-group a:hover,.footer-group button:hover { color: var(--color-coral); }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 10px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.contact-link { border: 0; background: none; font: inherit; padding: 0; cursor: pointer; }
/* Shared natural-language entry control. */
.input-bar-wrapper { width: 100%; max-width: 770px; }
.input-bar { display: flex; align-items: center; padding: var(--space-2); background: #fffffff5; border: 2px solid #ffe4e1; border-radius: var(--radius-pill); box-shadow: 0 18px 65px -20px #9c665c50,0 0 0 7px #ffffff45; transition: border-color var(--ease); }
.input-bar:focus-within { border-color: var(--color-coral-bright); }
.input-wrapper { flex: 1; min-width: 0; position: relative; }
.input-field { height: 48px; width: 100%; min-width: 0; padding: 0 16px; border: 0; outline: 0; background: transparent; color: var(--color-ink); font-size: 17px; position: relative; z-index: 1; }
.input-field:focus { z-index: 3; outline: 0; }
.rotating-examples { position: absolute; inset: 0; height: 48px; display: flex; align-items: center; padding: 0 8px; pointer-events: none; z-index: 2; overflow: hidden; }
.rotating-examples.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.example-text { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 7px 13px; background: #ff6b4a0d; border: 1px solid #ff6b4a1f; border-radius: var(--radius-pill); color: var(--color-muted); font: 13px var(--font-sans); text-align: left; cursor: pointer; pointer-events: auto; }
.example-text::before { content: 'Try'; font-size: 9px; text-transform: uppercase; color: var(--color-coral); margin-right: 10px; }
.start-btn { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; color: white; background: linear-gradient(135deg,var(--brand-500),var(--accent-500)); transition: transform var(--ease); }
.start-btn:hover { transform: scale(1.05); }
.input-helper { font-size: 11px; color: var(--color-muted); margin-top: var(--space-4); text-align: center; }
/* Shared contact dialog. Visibility changes immediately so keyboard focus can enter. */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: #30332f50; backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.contact-glass { position: relative; width: 100%; max-width: 440px; max-height: 90svh; overflow-y: auto; padding: var(--space-8); background: var(--color-surface); border: 1px solid #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 48px #30332f22; }
.contact-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--color-muted); }
.contact-close:hover { background: var(--color-oat); }
.contact-title { font-size: 23px; line-height: 1.3; font-weight: 500; margin-bottom: 6px; }
.contact-subtitle { font-size: 13px; color: var(--color-muted); margin-bottom: 26px; }
.contact-form { display: grid; gap: 18px; }
.form-group { display: grid; gap: 7px; }
.form-group label { font-size: 12px; font-weight: 500; }
.form-input,.form-select,.form-textarea { width: 100%; padding: 11px 13px; min-height: 44px; background: #fff; color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: 14px; }
.form-textarea { min-height: 108px; resize: vertical; }
.form-submit { display: flex; align-items: center; justify-content: center; min-height: 48px; gap: var(--space-2); padding: 12px 20px; border: 0; border-radius: var(--radius-pill); background: var(--color-forest); color: white; font-size: 13px; }
.form-submit:disabled { opacity: .65; cursor: wait; }
.submit-loading { display: inline-flex; align-items: center; gap: var(--space-2); }.spinner { width: 18px; height: 18px; }
.contact-status { font-size: 12px; line-height: 1.7; padding: var(--space-2); border-radius: 8px; }.contact-status:empty { display: none; }
.contact-status.success { background: #eff4e9; color: #277744; }.contact-status.error { background: #fbe9e3; color: #b52d2d; }
@media (min-width: 1600px) { :root { --site-width: 1280px; } }
@media (max-width: 900px) {
  .site-nav > a,.site-menu > summary { padding: 8px 10px; font-size: 11px; }
  .site-brand { font-size: 24px; }
  .ds-faq { gap: 40px; }
  .footer-main { gap: var(--space-6); }
}
@media (max-width: 700px) {
  :root { --page-gutter: 20px; }
  .site-header { padding-block: 16px; gap: var(--space-3); }
  .site-brand { font-size: 22px; gap: 7px; }.site-brand-mark { font-size: 21px; }
  .site-nav .nav-secondary { display: none; }
  .site-nav > .site-signup { padding-inline: 13px; }
  .menu-panel { top: calc(100% + 10px); width: min(460px, calc(100vw - 40px)); padding: 20px; gap: 20px; max-height: calc(100svh - 110px); }
  .ds-faq { grid-template-columns: 1fr; padding-block: 60px; gap: 30px; }
  .ds-faq-intro h2 { font-size: 32px; }.ds-faq summary { font-size: 13px; }
  .ds-closing { margin: 20px 12px 0; padding: 42px 22px 48px; }
  .site-footer { padding-top: 40px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1/-1; }.footer-brand p { max-width: none; margin-top: 7px; }
  .footer-group a,.footer-group button { min-height: 44px; }
  .footer-base { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-3); }
  .footer-legal { gap: var(--space-6); }.footer-signoff { display: none; }
  .contact-glass { padding: 26px 22px; }.contact-title { font-size: 21px; }
  .input-field,.form-input,.form-select,.form-textarea { font-size: 16px; }.example-text { font-size: 12px; }
}
@media (max-width: 350px) { .site-brand-mark { display: none; }.site-brand { font-size: 21px; }.site-header { gap: var(--space-2); }.site-nav > .site-signup { padding-inline: 10px; }.site-menu > summary { padding-inline: 9px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }