/* Service Translator — public website.
   Load after design-system/tokens.css and design-system/components.css.
   Every colour, size and radius comes from the tokens; nothing is hard coded here. */
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:var(--text-body);
}
a {
  color:inherit;
  text-underline-offset:4px;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px;
}
.site-header {
  max-width:1320px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-gutter) 5%;
  gap:var(--space-24);
}
.wordmark {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
}
.wordmark img {
  border-radius:var(--radius-card);
}
.beta {
  font:var(--text-badge);
  letter-spacing:1.5px;
  border:1px solid var(--line);
  padding:3px 7px;
  border-radius:var(--radius-pill);
}
nav {
  display:flex;
  align-items:center;
  gap:var(--space-24);
}
nav a {
  text-decoration:none;
  font-size:13px;
}
.lang-switch {
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:3px;
  gap:2px;
}
.lang-switch a {
  padding:4px 9px;
  border-radius:var(--radius-pill);
  font:var(--text-note);
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.lang-switch a[aria-current] {
  background:var(--green);
  color:var(--on-green);
}
.button,button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-24);
  border:1px solid var(--green);
  border-radius:var(--radius-sm);
  background:var(--green);
  color:var(--on-green);
  padding:14px 23px;
  text-decoration:none;
  font:var(--text-button);
}
.small {
  padding:10px 17px;
}
.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.wrap {
  max-width:var(--width-content);
  margin:auto;
  padding:var(--space-64) var(--space-gutter);
}
.eyebrow {
  font:var(--text-eyebrow);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:20px;
}
.hero {
  display:grid;
  grid-template-columns:1.06fr 1fr;
  align-items:center;
  gap:60px;
  padding-top:65px;
  padding-bottom:85px;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  font:var(--text-display);
  font-size:clamp(42px,5.3vw,70px);
  letter-spacing:-2px;
  margin-bottom:26px;
}
h1 em,h2 em {
  font-style:italic;
  font-weight:normal;
  color:var(--moss);
}
h2 {
  font:var(--text-heading);
  letter-spacing:-1px;
}
h3 {
  font:var(--text-title);
}
p {
  color:var(--muted);
}
.lead {
  font:var(--text-lead);
  max-width:540px;
}
.actions {
  display:flex;
  gap:var(--space-12);
  flex-wrap:wrap;
  margin:30px 0 16px;
}
.note {
  font:var(--text-note);
}
.hero-art {
  position:relative;
  background:var(--sage);
  border-radius:var(--radius-arch) var(--radius-arch) 24px 24px;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.halo {
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid var(--sage-line);
  border-radius:50%;
  top:45px;
  left:40px;
}
.halo:after {
  content:'';
  position:absolute;
  inset:25px;
  border:1px solid var(--sage-line);
  border-radius:50%;
}
.floating {
  position:absolute;
  z-index:2;
  background:var(--white);
  padding:12px 17px;
  border-radius:var(--radius-float);
  box-shadow:var(--shadow-float);
  font-size:12px;
}
.floating.top {
  left:16px;
  top:65px;
}
.floating.bottom {
  right:15px;
  bottom:36px;
}
.strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:23px 0;
  font:var(--text-note);
  color:var(--muted);
}
.section-heading {
  max-width:580px;
  margin-bottom:36px;
}
.grid3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-24);
}
.card {
  padding:var(--space-28);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--white);
}
.step-number {
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--sage-step);
  font-size:13px;
  margin-bottom:24px;
}
.card p {
  font-size:14px;
  margin-bottom:0;
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-64);
  align-items:center;
}
.feature-list {
  list-style:none;
  padding:0;
}
.feature-list li {
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.feature-list strong {
  display:block;
}
.feature-list span {
  color:var(--muted);
  font-size:14px;
}
.offer {
  background:var(--green);
  color:var(--on-green);
  border-radius:var(--radius-panel);
  padding:var(--space-45);
}
.offer p {
  color:var(--on-green-muted);
}
.offer .eyebrow {
  color:var(--on-green-eyebrow);
}
.credit-number {
  font:var(--text-credit-number);
  letter-spacing:-3px;
}
.offer .button {
  background:var(--lime);
  color:var(--ink);
  border:0;
}
.faq {
  max-width:800px;
}
details {
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
summary {
  cursor:pointer;
  font-weight:600;
}
details p {
  margin:15px 0 0;
}
.closing {
  text-align:center;
  border-radius:var(--radius-panel);
  background:var(--sage);
  padding:55px 25px;
}
.closing .actions {
  justify-content:center;
}
footer {
  max-width:var(--width-content);
  margin:40px auto 0;
  border-top:1px solid var(--line);
  padding:35px var(--space-gutter);
}
footer p,footer small {
  font:var(--text-note);
}
footer nav {
  flex-wrap:wrap;
  margin-bottom:var(--space-24);
}
.narrow {
  max-width:740px;
}
.form-card label {
  display:block;
  font:var(--text-label);
  margin:20px 0 6px;
}
input:not([type=checkbox]),select {
  width:100%;
  padding:12px;
  border:1px solid var(--field-border);
  border-radius:var(--radius-field);
  background:var(--field);
  color:var(--ink);
}
.form-card .check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:400;
}
input[type=checkbox] {
  margin-top:6px;
  accent-color:var(--green);
}
.error {
  color:var(--error);
  background:var(--error-bg);
  padding:14px;
  border-radius:var(--radius-sm);
}
.success {
  background:var(--success-bg);
  padding:15px;
  border-radius:var(--radius-sm);
}
.steps {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  padding:0;
  list-style:none;
  font-size:12px;
  margin-bottom:30px;
}
.steps li {
  padding:8px 15px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
}
.steps .current {
  background:var(--green);
  color:var(--on-green);
  border-color:var(--green);
}
.copy-box {
  word-break:break-all;
  background:var(--sage);
  padding:15px;
  border-radius:var(--radius-sm);
}
.skip {
  position:absolute;
  top:-100px;
}
.skip:focus {
  top:0;
  background:var(--white);
  padding:15px;
  z-index:100;
}
meter {
  width:100%;
  height:25px;
}
.hidden {
  display:none;
}
.qr {
  width:180px;
  height:180px;
  background:var(--field);
}
.prose li {
  margin-bottom:12px;
}
.prose a {
  font-weight:600;
}
@media(max-width:900px) {
  .site-header {
    flex-wrap:wrap;
    gap:18px;
  }
  .site-header nav {
    gap:18px;
    flex-wrap:wrap;
  }
  .hero {
    gap:28px;
  }
  .hero-art {
    min-height:560px;
  }
  .floating {
    font-size:10px;
    padding:10px;
  }
  .grid3 {
    gap:var(--space-12);
  }
  .card {
    padding:22px;
  }
}
@media(max-width:650px) {
  .hero,.split,.grid3 {
    grid-template-columns:1fr;
  }
  .hero {
    padding-top:30px;
    gap:35px;
  }
  h1 {
    font-size:52px;
  }
  .wrap {
    padding:40px 22px;
  }
  .site-header {
    padding:20px 22px;
  }
  .site-header nav {
    gap:16px;
  }
  .site-header nav a {
    font-size:12px;
  }
  .wordmark {
    font-size:16px;
  }
  .hero-art {
    min-height:560px;
  }
  .strip {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px 25px;
  }
  .split {
    gap:28px;
  }
  h2 {
    font-size:35px;
  }
  .offer {
    padding:30px;
  }
  .card {
    padding:26px;
  }
  .phone {
    transform:rotate(4deg);
    width:250px;
    height:480px;
  }
  .screen {
    height:620px;
  }
  .screen .ui-main {
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:"verse" "chips" "text";
  }
  .screen .ui-verse p {
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .actions .button {
    flex-grow:1;
  }
}
.service-estimates { margin-top: 52px; }
.estimate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.estimate-grid .full-setup { background: var(--sage); }
.estimate-grid .eyebrow { letter-spacing: 1px; }
.estimate-grid dl { margin: 0 0 20px; }
.estimate-grid dl div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.estimate-grid dt { color: var(--muted); font-size: 13px; }
.estimate-grid dd { margin: 0; font-size: 29px; font-weight: 650; }
.estimate-grid dd small { font-size: 13px; font-weight: 400; }
@media (max-width: 650px) { .estimate-grid { grid-template-columns: 1fr; } }

/* --- Product replicas: the real attendee screen, built from the same tokens as
   static/app.css so the marketing pages show exactly what people get. ---------- */
.ui {
  display:flex;
  flex-direction:column;
  gap:.75em;
  height:100%;
  padding:.9em;
  background:var(--paper);
  color:var(--ink);
  font:400 1em/1.5 var(--font-sans);
  text-align:left;
}
.ui-top {
  display:flex;
  align-items:center;
  gap:.6em;
  padding-bottom:.6em;
  border-bottom:1px solid var(--line);
}
.ui-top img {
  width:2.1em;
  height:2.1em;
  border-radius:.65em;
}
.ui-top strong {
  font-weight:650;
  white-space:nowrap;
}
.ui-tag {
  font-size:.6em;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.25em .8em;
  white-space:nowrap;
}
.ui-live {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:.45em;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.3em .9em;
  font-size:.85em;
  color:var(--muted);
  white-space:nowrap;
}
.ui-live::before {
  content:'';
  width:.5em;
  height:.5em;
  border-radius:50%;
  background:var(--live);
}
.ui-controls {
  display:flex;
  align-items:center;
  gap:.7em;
  padding:.7em 1em;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  font-size:.9em;
}
.ui-label {
  font-weight:600;
  white-space:nowrap;
}
.ui-select {
  position:relative;
  padding:.45em 2em .45em .8em;
  border:1px solid var(--field-border);
  border-radius:var(--radius-field);
  background:var(--field);
  white-space:nowrap;
}
.ui-select::after {
  content:'⌄';
  position:absolute;
  right:.7em;
  top:.1em;
  color:var(--muted);
}
.ui-session {
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ui-session strong {
  color:var(--ink);
  font-weight:600;
}
.ui-audio {
  margin-left:auto;
  padding:.5em 1em;
  background:var(--lime);
  color:var(--ink);
  border-radius:var(--radius-sm);
  font-weight:600;
  white-space:nowrap;
}
.ui-main {
  display:grid;
  grid-template-columns:5fr 7fr;
  grid-template-rows:1fr auto;
  grid-template-areas:"verse text" "chips text";
  gap:.75em;
  flex:1;
  min-height:0;
}
.ui-panel {
  min-height:0;
  padding:.9em 1.2em;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--white);
  overflow:hidden;
}
.ui-verse {
  grid-area:verse;
  background:var(--sage);
  border-color:var(--sage);
}
.ui-text {
  grid-area:text;
}
.ui-panel-label {
  margin-bottom:.6em;
  font-size:.7em;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.ui-ref {
  display:block;
  margin-bottom:.3em;
  font-size:1.15em;
  font-weight:700;
  color:var(--green);
}
.ui-verse p {
  margin:0;
  font:400 1.25em/1.45 var(--font-serif);
  color:var(--ink);
}
.ui-credit {
  display:block;
  margin-top:.6em;
  font-size:.7em;
  color:var(--muted);
}
.ui-chips {
  grid-area:chips;
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
}
.ui-chip {
  padding:.4em 1em;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--white);
  font-size:.75em;
}
.ui-chip.newest {
  background:var(--green);
  color:var(--on-green);
  border-color:var(--green);
}
.ui-text p {
  margin:0;
  font:400 1.6em/1.5 var(--font-serif);
  color:var(--ink);
}
.ui-text .interim {
  color:var(--muted);
}

/* The hero phone: a real handset showing the attendee screen. */
.phone {
  position:relative;
  z-index:1;
  width:272px;
  height:540px;
  padding:9px;
  background:var(--phone-frame);
  border-radius:44px;
  box-shadow:var(--shadow-phone);
  transform:rotate(6deg);
}
.phone-screen {
  position:relative;
  height:100%;
  border-radius:36px;
  background:var(--paper);
  overflow:hidden;
}
.phone-notch {
  position:absolute;
  z-index:2;
  top:9px;
  left:50%;
  width:72px;
  height:20px;
  transform:translateX(-50%);
  border-radius:var(--radius-pill);
  background:var(--phone-frame);
}
.phone .ui {
  font-size:9.2px;
  padding:4.2em 1.1em 1.1em;
  gap:.8em;
}
.phone .ui-top img {
  width:2.4em;
  height:2.4em;
}
.phone .ui-top strong {
  font-size:1.15em;
}
.phone .ui-main {
  grid-template-columns:1fr;
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"verse" "chips" "text";
}
.phone .ui-verse p {
  font-size:1.2em;
}
.phone .ui-text p {
  font-size:1.5em;
}

/* The wide screen in "What everyone sees": the same view on a tablet or laptop. */
.screen {
  height:560px;
  border:10px solid var(--phone-frame);
  border-radius:var(--radius-panel);
  background:var(--paper);
  box-shadow:var(--shadow-phone);
  overflow:hidden;
}
.screen .ui {
  font-size:14px;
  padding:1.2em;
}
.see-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-24);
  margin-top:var(--space-24);
}
.see-grid .card p {
  margin-top:8px;
}
@media(max-width:900px) {
  .screen .ui {
    font-size:12px;
  }
}
@media(max-width:650px) {
  .see-grid {
    grid-template-columns:1fr;
  }
  .screen .ui {
    font-size:11px;
  }
  .screen .ui-session {
    display:none;
  }
}