/* ansame — v2 design. Cream paper, deep ink, one teal. Newsreader for headings, Hanken Grotesk for everything else. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
:root {
  --ink: #17232A; --ink-2: #33424A; --muted: #646E73; --faint: #8B9397;
  --paper: #F6F3EC; --paper-2: #EFEADF; --card: #FFFFFF; --line: #E2DCCF; --line-2: #ECE7DC;
  --teal: #0E7A6F; --teal-ink: #0A5E56; --teal-bright: #16A394; --teal-wash: #E2F2EE; --teal-wash-2: #F0F8F6;
  --rust: #A8431E; --rust-wash: #FAEDE6; --amber: #8A5A00; --amber-wash: #FBF1DC; --green: #2D6E45; --green-wash: #E5F1E8;
  --r: 8px; --r-lg: 12px; --shadow: 0 1px 2px rgba(23,35,42,.05), 0 6px 24px -12px rgba(23,35,42,.12);
  --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0; color: var(--ink); }
h1 { font-size: clamp(30px, 4.2vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0 0 12px; }
small, .small { font-size: 14px; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.hide { display: none !important; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; border-radius: 4px; }
.wrap { width: min(1120px, 100% - 40px); margin: 0 auto; }
.eyebrow { font: 600 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--teal); background: var(--teal); color: #fff; font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-2); color: var(--ink); background: var(--card); }
.btn.quiet { background: none; border-color: transparent; color: var(--teal); padding: 0 6px; }
.btn.quiet:hover { color: var(--teal-ink); text-decoration: underline; }
.btn.danger { background: var(--card); color: var(--rust); border-color: #E5C9BC; }
.btn.danger:hover { background: var(--rust-wash); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn.big { min-height: 50px; padding: 0 24px; font-size: 16px; }
.btn[disabled], .btn.is-off { opacity: .55; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 14px; }

/* forms */
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; color: var(--ink-2); }
.hint { font-weight: 400; color: var(--muted); font-size: 13px; }
p.hint { margin: -2px 0 8px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=url], input[type=number], select, textarea {
  width: 100%; font: 16px/1.4 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-height: 44px; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 96px; resize: vertical; } textarea.big { min-height: 200px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(22,163,148,.16); }
input[disabled] { background: var(--paper); color: var(--muted); }
.f { margin-bottom: 16px; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; margin: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--teal); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice label { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 12px 42px; position: relative; cursor: pointer; background: var(--card); font-weight: 400; margin: 0; }
.choice input { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; accent-color: var(--teal); }
.choice label:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); background: var(--teal-wash-2); }
.choice b { display: block; color: var(--ink); }
.choice .price { font-family: var(--serif); font-size: 22px; color: var(--ink); display: block; margin-top: 4px; }
.src { display: inline-block; margin-left: 6px; font: 500 11px/1.6 var(--sans); color: var(--teal-ink); background: var(--teal-wash); border-radius: 4px; padding: 0 6px; vertical-align: 1px; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filled { border-color: #A9D8CF !important; background: var(--teal-wash-2) !important; }

/* notes and pills */
.note { border-radius: var(--r); padding: 11px 14px; font-size: 15px; margin: 12px 0; border: 1px solid transparent; }
.note.ok { background: var(--green-wash); border-color: #C9E2D0; color: #1F4F31; }
.note.err { background: var(--rust-wash); border-color: #EFCFC0; color: #7A2E12; }
.note.info { background: var(--teal-wash-2); border-color: #CBE6E0; color: var(--ink-2); }
.note.amber { background: var(--amber-wash); border-color: #EEDBAF; color: #5E3E00; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); padding: 5px 9px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.pill.live, .pill.won, .pill.delivered { background: var(--green-wash); color: var(--green); }
.pill.trial, .pill.pending, .pill.draft, .pill.retrying { background: var(--amber-wash); color: var(--amber); }
.pill.paused, .pill.not_connected, .pill.lost { background: var(--paper-2); color: var(--muted); }
.pill.urgent, .pill.failed { background: var(--rust-wash); color: var(--rust); }
.pill.sent { background: var(--teal-wash); color: var(--teal-ink); }
.pill.demo { background: #EEF0F7; color: #4A5470; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rust); color: #fff; font: 700 11px/1 var(--sans); margin-left: auto; }

/* panels, tables */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 22px; margin-bottom: 4px; }
.panel > .sub, .sub { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-head h2 { margin: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--teal-wash-2); }
.tbl input, .tbl select { min-height: 38px; padding: 7px 9px; font-size: 15px; }
.tblwrap { overflow-x: auto; margin: 0 -2px; }
.empty { padding: 28px 0 8px; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 4px; }
.linkbox { display: flex; gap: 8px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 8px 8px 12px; margin-top: 10px; font: 14px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; }
details > summary { cursor: pointer; color: var(--teal); font-weight: 600; font-size: 15px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-block; width: 16px; font-weight: 700; }
details[open] > summary::before { content: "–"; }

/* ===== public site ===== */
.top { position: sticky; top: 0; z-index: 10; background: rgba(246,243,236,.92); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid transparent; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo img { height: 28px; width: auto; }
.top nav { display: flex; align-items: center; gap: 22px; }
.top nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.top nav a:not(.btn):hover { color: var(--teal); }
.hero { padding: 64px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--teal); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 20px 0 28px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.trust { margin-top: 26px; font-size: 14px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.trust span::before { content: "—"; margin-right: 8px; color: var(--teal-bright); }
.msg { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.msg-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.msg-top b { color: var(--ink); font-size: 14px; }
.msg-body { padding: 18px; }
.msg-body h3 { font-size: 22px; margin: 6px 0 12px; }
.kv { display: grid; grid-template-columns: 104px 1fr; gap: 8px 12px; font-size: 15px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.msg-quote { margin: 0 18px 18px; border: 1px dashed #BFDCD5; background: var(--teal-wash-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.msg-quote .line { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.msg-quote .line.tot { border-top: 1px solid #CFE5DF; margin-top: 6px; padding-top: 8px; font-weight: 700; }
.section { padding: 76px 0; }
.section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head p { color: var(--ink-2); font-size: 18px; margin-top: 12px; }
.section-head p.eyebrow { color: var(--teal); font-size: 12px; margin: 0 0 14px; }
.day { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 26px 26px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--teal-bright); }
.timeline li:last-child { padding-bottom: 0; }
.timeline time { font: 600 13px/1 var(--sans); color: var(--teal); letter-spacing: .04em; }
.timeline p { margin: 6px 0 0; color: var(--ink-2); }
.timeline b { color: var(--ink); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.split > div { padding: 32px; }
.split > div + div { border-left: 1px solid var(--line); }
.split h3 { font-size: 26px; margin-bottom: 8px; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; }
.ticks li { padding: 9px 0 9px 28px; border-top: 1px solid var(--line-2); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: s; }
.steps > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.steps > div::before { counter-increment: s; content: "0" counter(s); font: 500 15px/1 var(--serif); color: var(--teal); display: block; margin-bottom: 14px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); margin: 0; }
.pricing { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pricing th, .pricing td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--line-2); }
.pricing thead th { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.pricing td.p { font: 500 30px/1 var(--serif); white-space: nowrap; } .pricing td.p small { font: 400 14px var(--sans); color: var(--muted); }
.pricing tr:last-child td { border-bottom: 0; }
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { color: var(--ink); font: 500 20px/1.3 var(--serif); }
.faq summary::before { color: var(--teal); }
.faq details p { margin: 10px 0 0 16px; color: var(--ink-2); }
.enquire { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.foot { padding: 36px 0 48px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.foot a { color: var(--muted); }

/* auth pages */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: var(--ink); color: #DCE5E3; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side blockquote { margin: 0; font: 400 28px/1.3 var(--serif); color: #fff; max-width: 15em; }
.auth-side p { color: #9FB2AF; font-size: 15px; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box h1 { font-size: 34px; margin: 26px 0 6px; }

/* ===== app shell ===== */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: linear-gradient(to right, var(--card) 247px, var(--line) 247px, var(--line) 248px, transparent 248px); }
.side { background: var(--card); border-right: 1px solid var(--line); padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; }
.side .logo { padding: 0 10px; }
.side .who { padding: 0 10px; }
.side .who b { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; }
.side .who span { font-size: 13px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button, .nav a { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 7px; padding: 9px 10px; font: 500 15px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; text-align: left; text-decoration: none; }
.nav button:hover, .nav a:hover { background: var(--paper); color: var(--ink); }
.nav button[aria-selected=true] { background: var(--teal-wash); color: var(--teal-ink); font-weight: 600; }
.nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.side-foot .btn { margin-top: 8px; }
.main { padding: 34px 40px 60px; min-width: 0; overflow-wrap: break-word; }
.main-inner { max-width: 1040px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.pagehead h1 { font-size: clamp(28px, 3.4vw, 38px); }
.pagehead .meta { color: var(--muted); font-size: 15px; margin-top: 8px; line-height: 2; }
.pagehead .meta .pill { margin-right: 6px; }
.ownerbar { background: var(--ink); color: #DCE5E3; font-size: 14px; padding: 9px 40px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.ownerbar a { color: #fff; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 18px; }
.stats.s6 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: 18px 20px; border-left: 1px solid var(--line-2); }
.stat:first-child { border-left: 0; }
.stats.s6 .stat:nth-child(4) { border-left: 0; } .stats.s6 .stat:nth-child(n+4) { border-top: 1px solid var(--line-2); }
.stat b { display: block; font: 500 30px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); }
.bar { height: 6px; background: var(--paper-2); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
.bar i { display: block; height: 100%; background: var(--teal-bright); border-radius: 99px; }
.grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.grid2 > .panel + .panel { margin-top: 0; }

/* call items */
.item { border-top: 1px solid var(--line-2); padding: 18px 0; }
.item:first-child { border-top: 0; padding-top: 4px; }
.item .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.item .whoc { font-weight: 700; font-size: 16px; }
.item .when { font-size: 13px; color: var(--muted); white-space: nowrap; }
.item dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.item dt { color: var(--muted); } .item dd { margin: 0; overflow-wrap: anywhere; }
.item.isurgent { border-left: 3px solid var(--rust); padding-left: 14px; }
.item details { margin-top: 10px; }
.tx { white-space: pre-wrap; font: 14px/1.5 var(--sans); background: var(--paper); border-radius: var(--r); padding: 12px 14px; max-height: 340px; overflow: auto; margin: 8px 0 0; }
.phone-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 18px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.phone-steps div { padding: 10px 12px; font-size: 14px; color: var(--muted); text-align: center; background: var(--paper); border-left: 1px solid var(--line); }
.phone-steps div:first-child { border-left: 0; }
.phone-steps div.on { background: var(--teal-wash); color: var(--teal-ink); font-weight: 700; }
.dial { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 15px; white-space: nowrap; }
.codes { list-style: none; padding: 0; margin: 0; }
.codes li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.codes li:first-child { border-top: 0; }
.recip { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 0; margin-bottom: 10px; background: var(--paper); }
.prompt-pre { white-space: pre-wrap; font: 13px/1.55 ui-monospace, Menlo, monospace; background: var(--paper); border-radius: var(--r); padding: 14px; max-height: 420px; overflow: auto; }
.secret { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.reader { border: 1px solid #CBE6E0; background: var(--teal-wash-2); border-radius: var(--r-lg); padding: 20px; margin-bottom: 22px; }
.reader h3 { font-size: 20px; margin-bottom: 4px; }
.reader .row input { flex: 1 1 260px; }
.reader-out { margin-top: 12px; font-size: 14px; overflow-wrap: anywhere; }
.reader-out ul { margin: 6px 0 0; padding-left: 18px; }
.formsec { padding: 22px 0; border-top: 1px solid var(--line-2); }
.formsec:first-of-type { border-top: 0; padding-top: 0; }
.formsec > h3 { font-size: 19px; margin-bottom: 4px; }
.formsec > .sub { margin-bottom: 14px; }
.sticky-save { position: sticky; bottom: 0; background: linear-gradient(to top, var(--card) 70%, rgba(255,255,255,0)); padding: 16px 0 4px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* quote document */
.qwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.doc { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 44px 44px 36px; font-size: 14px; color: #1d2a30; position: sticky; top: 20px; }
.doc .dh { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--teal-bright); padding-bottom: 18px; margin-bottom: 20px; }
.doc .dh h2 { font-size: 26px; margin-bottom: 4px; }
.doc .ref { text-align: right; font-size: 13px; color: var(--muted); }
.doc .ref b { display: block; white-space: nowrap; color: var(--ink); font: 500 22px var(--serif); }
.doc .meta2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.doc .meta2 h4 { margin: 0 0 4px; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc table { width: 100%; border-collapse: collapse; }
.doc th { text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding: 0 0 8px; }
.doc td { padding: 10px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.doc .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 12px; }
.doc .tots { margin-left: auto; width: 260px; margin-top: 14px; }
.doc .tots div { display: flex; justify-content: space-between; padding: 5px 0; }
.doc .tots .grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; font: 600 20px var(--serif); }
.doc .terms { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.lines-ed .ln { display: grid; grid-template-columns: 1fr 70px 80px 100px 32px; gap: 8px; margin-bottom: 8px; align-items: center; }
.lines-ed .ln input { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.lines-ed .ln button { width: 32px; height: 32px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 20px; border-radius: 6px; }
.lines-ed .ln button:hover { background: var(--rust-wash); color: var(--rust); }
.lines-ed .lh { display: grid; grid-template-columns: 1fr 70px 80px 100px 32px; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* docs page */
.docs { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: 40px 0 80px; }
.docs nav { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.docs nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; } .docs nav a:hover { color: var(--teal); }
.docs article { max-width: 760px; min-width: 0; }
.docs article h2 { margin: 46px 0 12px; padding-top: 10px; } .docs article h2:first-of-type { margin-top: 20px; }
.docs article h3 { margin: 26px 0 8px; font-size: 19px; }
.docs pre { background: var(--ink); color: #E3ECEA; border-radius: var(--r); padding: 16px 18px; overflow-x: auto; font: 13.5px/1.6 ui-monospace, Menlo, monospace; margin: 12px 0 18px; }
.docs p code, .docs li code, .docs td code { background: var(--paper-2); padding: 1px 6px; border-radius: 4px; }
.docs table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0 18px; }
.docs th, .docs td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.docs th { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* responsive */
@media (max-width: 980px) {
  .hero .wrap, .day, .enquire, .grid2, .qwrap { grid-template-columns: 1fr; gap: 36px; }
  .doc { position: static; }
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .app > * { min-width: 0; }
  .side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 14px 0; gap: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side .logo img { height: 24px; }
  .side .who { display: none; }
  .side-foot { margin: 0 0 0 auto; padding: 0; border: 0; order: 2; }
  .side .logo { order: 1; } .nav { order: 3; } .side-foot br { display: none; }
  .side-foot span { display: none; } .side-foot .btn { margin: 0; }
  .nav { flex-direction: row; overflow-x: auto; width: calc(100% + 28px); margin: 0 -14px; padding: 4px 14px 8px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button, .nav a { width: auto; white-space: nowrap; padding: 8px 12px; }
  .nav svg { display: none; }
  .main { padding: 24px 20px 48px; }
  .ownerbar { padding: 9px 20px; }
  .docs { grid-template-columns: 1fr; } .docs nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  .top nav a:not(.btn) { display: none; }
  .hero { padding: 36px 0 56px; }
  .lead { font-size: 17px; }
  .section { padding: 56px 0; }
  .split, .steps { grid-template-columns: 1fr; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .split > div { padding: 24px; }
  .steps { gap: 28px; }
  .two, .three, .choice { grid-template-columns: 1fr; }
  .stats, .stats.s6 { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .stats.s6 .stat:nth-child(4) { border-left: 1px solid var(--line-2); }
  .panel { padding: 18px; border-radius: var(--r); }
  .item dl { grid-template-columns: 1fr; gap: 0; } .item dt { margin-top: 6px; font-size: 13px; }
  .pricing th, .pricing td { padding: 14px; } .pricing td.p { font-size: 24px; }
  .auth { grid-template-columns: 1fr; } .auth-side { display: none; }
  .doc { padding: 24px 18px; } .doc .meta2 { grid-template-columns: 1fr; } .doc .tots { width: 100%; }
  .lines-ed .ln, .lines-ed .lh { grid-template-columns: 1fr 56px 84px 32px; }
  .lines-ed .ln .u, .lines-ed .lh .u { display: none; }
  .tbl.stack-sm thead { display: none; }
  .tbl.stack-sm tr { display: block; border-bottom: 1px solid var(--line-2); padding: 10px 0; }
  .tbl.stack-sm td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; }
  .tbl.stack-sm td::before { content: attr(data-l); color: var(--muted); font-size: 13px; }
  .tbl.stack-sm td.num { text-align: right; }
  .pagehead { margin-bottom: 18px; }
}
@media print {
  body { background: #fff; }
  .side, .ownerbar, .qedit, .pagehead, .noprint { display: none !important; }
  .app, .qwrap { display: block; } .main { padding: 0; }
  .doc { border: 0; box-shadow: none; padding: 0; position: static; }
}

/* calmer hero (Oct 29 feedback) */
.ghost-link{align-self:center;color:var(--ink);text-decoration:none;font-weight:500;padding:0 6px}
.ghost-link:hover{text-decoration:underline}
@media (max-width:720px){
  .top nav a.login{display:inline-block;margin-right:8px}
  .hero .eyebrow{display:none}
  .hero h1{font-size:34px;line-height:1.12}
  .hero .msg{display:none}
  .hero .trust span:nth-child(n+2){display:none}
}

/* ---- bookings ---- */
.bk-toggle { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.bk-toggle h2 { margin: 0 0 4px; }
.bk-toggle .sub { margin: 0; max-width: 560px; }
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; margin: 2px 0 0; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: #CFC8BA; border-radius: 99px; transition: background .18s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23,35,42,.25); transition: transform .18s; }
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::after { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
.switch input:disabled + span { opacity: .5; }
.bk-peek { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
.bk-peek b { color: var(--ink); font-weight: 600; }
.bk-peek .slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bk-peek .slots span { background: var(--teal-wash-2); border: 1px solid var(--teal-wash); color: var(--teal-ink); border-radius: 99px; padding: 4px 11px; font-size: 14px; font-weight: 500; }
.bk-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line-2); }
.bk-item:first-child { border-top: 0; padding-top: 6px; }
.bk-item.is-cancelled { opacity: .55; }
.bk-date { text-align: center; border: 1px solid var(--line); border-radius: var(--r); padding: 5px 0 7px; background: var(--paper); }
.bk-date span { display: block; font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.bk-date b { display: block; font: 500 26px/1.05 var(--serif); color: var(--ink); }
.bk-what { min-width: 0; }
.bk-what .t { font-weight: 700; }
.bk-what .t .muted { font-weight: 400; }
.bk-what .d { font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.bk-what .d a { color: var(--teal-ink); }
.bk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bk-cal { grid-template-columns: repeat(4, 1fr); }
.bk-cal label { padding-bottom: 14px; }
.bk-cal .small { display: block; margin-top: 2px; line-height: 1.4; }
.bk-cal label.off { cursor: not-allowed; background: var(--paper); }
.bk-cal label.off b { color: var(--muted); }
.bk-types .bk-type { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px 40px; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line-2); }
.bk-types .bk-type:first-child { border-top: 0; padding-top: 0; }
.bk-types .bk-type.has-cal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 118px 118px 40px; }
.bk-types label { font-size: 13px; color: var(--muted); font-weight: 500; margin: 0 0 4px; }
.bk-types .x { width: 40px; height: 44px; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; }
.bk-types .x:hover { color: var(--rust); border-color: var(--rust); }
.bk-hours { display: grid; gap: 10px; max-width: 940px; }
.bk-day { display: grid; grid-template-columns: 140px 130px 130px 1fr; gap: 10px 12px; align-items: center; }
.bk-day input[type=time] { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--card); color: var(--ink); width: 100%; }
.bk-day input[type=time]:disabled { background: var(--paper); color: var(--faint); }
.bk-day .closed { grid-column: 2 / 5; color: var(--faint); font-size: 15px; }
.bk-brk { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.bk-brk input[type=time] { width: 130px; }
.linkish { background: none; border: 0; padding: 4px 2px; font: 500 14px var(--sans); color: var(--teal-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.linkish:hover { color: var(--teal); }
.bk-offs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bk-offday { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 14px; }
.bk-offday button { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.bk-offday button:hover { color: var(--rust); }
.bk-offadd { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-offadd input[type=date] { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--card); color: var(--ink); }
.bk-offadd input[type=text] { flex: 1 1 200px; max-width: 320px; }
.bk-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bk-rules .f { margin: 0; }
@media (max-width: 1100px) { .bk-cal { grid-template-columns: 1fr 1fr; } .bk-rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .bk-cal, .bk-rules { grid-template-columns: 1fr; }
  .bk-types .bk-type, .bk-types .bk-type.has-cal { grid-template-columns: 1fr 1fr 44px; }
  .bk-types .bk-type .nm, .bk-types .bk-type .cal { grid-column: 1 / -1; }
  .bk-day { grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
  .bk-day .check, .bk-day .bk-brk, .bk-day .linkish { grid-column: 1 / -1; }
  .bk-day .closed { grid-column: 1 / -1; margin-top: -4px; }
  .bk-brk { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .bk-brk .lbl { grid-row: 1; grid-column: 1; align-self: center; }
  .bk-brk .linkish { grid-row: 1; grid-column: 2; justify-self: end; }
  .bk-brk input[type=time] { grid-row: 2; width: 100%; }
  .bk-brk .to { display: none; }
  .bk-item { grid-template-columns: 52px 1fr; gap: 12px; }
  .bk-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
}
.bk-first { border-top: 0; padding-top: 0; }
.bk-hourshead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.bk-hourshead .sub { max-width: 560px; margin-bottom: 0; }
.bk-block { margin-top: 14px; }
.bk-block a { font-weight: 600; }


/* ---- phone layout fixes (Oct 29 2026): only below 720px; desktop untouched ---- */
@media (max-width: 720px) {
  .main { padding: 20px 16px 48px; }
  .main > *, .panel, .panel > * { min-width: 0; }
  /* tab bar: scrolls sideways with a fade hint at the edge */
  .nav { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); padding-right: 40px; scroll-padding-inline: 14px; }
  .nav button, .nav a { scroll-snap-align: start; flex: none; }
  .nav.at-end { -webkit-mask-image: none; mask-image: none; }
  /* stacked tables: label on the left, value on the right; any mixed content flows inside the value */
  .tbl.stack-sm { display: block; }
  .tbl.stack-sm tbody { display: block; }
  .tbl.stack-sm tr { display: block; padding: 12px 0; }
  .tbl.stack-sm td { display: block; text-align: right; padding: 4px 0; max-width: none !important; overflow-wrap: anywhere; }
  .tbl.stack-sm td::before { float: left; margin-right: 14px; text-align: left; line-height: 1.9; }
  .tbl.stack-sm td::after { content: ""; display: block; clear: both; }
  .tbl.stack-sm td:first-child { text-align: left; padding-bottom: 6px; font-size: 16px; }
  .tbl.stack-sm td:first-child::before { display: none; }
  .tbl.stack-sm td:not([data-l]) { text-align: left; }
  .tbl.stack-sm td:not([data-l])::before { display: none; }
  .tbl.stack-sm td:not([data-l]):last-child .btn { width: 100%; margin-top: 6px; }
  .tbl.stack-sm td .pill { white-space: nowrap; }
  .tblwrap:has(> .tbl.stack-sm) { overflow-x: visible; margin: 0; }
  /* the owner's Manage panel (a full-width row inside the stacked table) */
  .tbl.stack-sm tr[data-panelfor] { padding: 0 0 12px; }
  .tbl.stack-sm td[colspan] { display: block; text-align: left; padding: 16px !important; border-radius: var(--r); }
  .tbl.stack-sm td[colspan]::before, .tbl.stack-sm td[colspan]::after { display: none; }
  [data-panelfor] .row > .btn, [data-panelfor] .row > a.btn { flex: 1 1 100%; width: 100%; }
  [data-panelfor] form.row > input { flex: 1 1 100% !important; }
  [data-panelfor] form.row > .btn { flex: 1 1 100%; }
  /* login lists: long emails wrap, button goes full width under them */
  .codes li > span { min-width: 0; flex: 1 1 100%; overflow-wrap: anywhere; }
  .codes li > .btn { flex: 1 1 100%; }
  /* price list (business settings): each item becomes a small card */
  #plist, #plist tbody { display: block; }
  #plist thead { display: none; }
  #plist tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  #plist td { display: block; padding: 0; border: 0; width: auto !important; }
  #plist td[data-l]::before { content: attr(data-l); display: block; font: 600 12px/1.4 var(--sans); color: var(--muted); margin-bottom: 3px; }
  #plist td:nth-child(1), #plist td:nth-child(4), #plist td[colspan] { grid-column: 1 / -1; }
  #plist td:nth-child(5) { display: flex; align-items: center; gap: 8px; text-align: left !important; }
  #plist td:nth-child(5)::before { display: inline; margin: 0; order: 2; font-size: 14px; }
  #plist td:nth-child(6) { justify-self: end; align-self: center; }
  .tblwrap:has(> #plist) { overflow-x: visible; margin: 0; }
  .tbl.stack-sm td[data-l="Job"], .tbl.stack-sm td[data-l="Last answer"] { text-align: left; }
  .tbl.stack-sm td[data-l="Job"]::before, .tbl.stack-sm td[data-l="Last answer"]::before { float: none; display: block; line-height: 1.6; }
  /* generic safety */
  .row > input, .row > select { min-width: 0; }
  .linkbox { flex-wrap: wrap; }
  .linkbox > span { flex: 1 1 100% !important; }
  .linkbox > .btn { flex: 1 1 100%; }
}

/* billing (29 Oct 2026) */
.paydl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0 0;font-size:15px}.paydl dt{color:var(--muted,#6B7378)}.paydl dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.billbox select{max-width:100%}
@media (max-width:640px){.paydl{grid-template-columns:1fr;gap:0}.paydl dd{margin-bottom:8px}#b-filter{width:100%;flex-wrap:nowrap;overflow-x:auto}#b-filter .btn{flex:0 0 auto}.item.inv .row .btn{flex:1 1 auto}}

/* browser test call (29 Oct 2026) */
.tcall-panel .panel-head { margin-bottom: 8px; }
.tcall { margin-top: 4px; }
.tcall-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tcall-btn { display: inline-flex; align-items: center; gap: 10px; }
.tcall-btn .tcall-ic { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.tcall.live .tcall-btn { background: #B42318; border-color: #B42318; color: #fff; }
.tcall.live .tcall-ic { background: #fff; animation: tpulse 1.2s infinite; }
.tcall.speaking .tcall-ic { animation-duration: .5s; }
@keyframes tpulse { 50% { transform: scale(1.6); opacity: .4; } }
.tcall-sub { margin: 0; }
.tcall-status { margin: 8px 0 0; font-weight: 600; } .tcall-status.bad { color: #B42318; } .tcall-status.ok { color: #067647; }
.tcall-status:not(:empty) { display: block; }
.recbox { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #faf8f3); }
@media (max-width: 640px) { .tcall-main { flex-direction: column; align-items: stretch; } .tcall-btn { width: 100%; justify-content: center; } .tcall-owner .tcall-btn { width: 100%; } }

/* login: label + "Forgot password?" on one line */
.f .lblrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.f .lblrow label{margin-bottom:0}.f .lblrow a{font-size:13px;white-space:nowrap}.f .lblrow + input{margin-top:6px}