/* TheLingo.ai's colours, from the logo: ink #10122B, violet #5B4BFF, lime #B8F23A, soft violet #9A8FFF. Light is the default;
   dark is for whoever picks it, and a printed or saved-as-PDF report is always light. */
:root {
  --ink: #10122B; --violet: #5B4BFF; --lime: #B8F23A; --violet-2: #9A8FFF;
  --bg: #f7f7fc; --panel: #ffffff; --soft: #f0effa; --line: #e3e2f0; --text: #10122B; --muted: #555873; --faint: #8d8fa8;
  --accent: #5B4BFF; --accent-soft: #ecebff; --on-accent: #ffffff;
  --good: #1c7c48; --good-soft: #dbf1e3; --bad: #b93a2c; --bad-soft: #fae3df; --warn: #9a6b12; --warn-soft: #fbefcd; --info: #2c56b8; --info-soft: #e2eafb;
  --shadow: 0 1px 2px rgba(16, 18, 43, .05), 0 6px 20px rgba(16, 18, 43, .06); --radius: 14px;
}
@media screen {
  html[data-theme="dark"] {
    --bg: #10122B; --panel: #181b3a; --soft: #20244a; --line: #2e3363; --text: #f2f2fa; --muted: #a9acc9; --faint: #7a7ea3;
    --accent: #9A8FFF; --accent-soft: #2a2862; --on-accent: #10122B;
    --good: #64d391; --good-soft: #183a27; --bad: #ff8576; --bad-soft: #47211c; --warn: #eec469; --warn-soft: #3f3217; --info: #8fb0ff; --info-soft: #1e2c4d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { font: 15px/1.55 -apple-system, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased }
a { color: var(--accent) }
h1, h2, h3, h4, p { margin: 0 }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 7px 13px }
button:hover { background: var(--soft) } button:disabled { opacity: .5; cursor: default }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700 } button.primary:hover { filter: brightness(1.08) }
button.ghost { border-color: transparent; background: transparent } button.ghost:hover { background: var(--soft) }
button.icon { padding: 6px 9px; line-height: 1 } button.danger { color: var(--bad) } button.tiny { padding: 2px 9px; font-size: 12.5px; border-radius: 7px }
select, input[type=text] { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; outline: none }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.hidden { display: none !important } .muted { color: var(--muted) } .small { font-size: 13px } .grow { flex: 1 }
.row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap }

.top { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5 }
.brand { display: flex; align-items: center; color: var(--text); text-decoration: none }
.logo { display: block; height: 34px; width: auto } .logo.on-dark { display: none }
html[data-theme="dark"] .logo.on-light { display: none } html[data-theme="dark"] .logo.on-dark { display: block }
@media (max-width: 520px) { .logo { height: 28px } .top { padding: 10px 14px } }
.hl { background: var(--lime); color: var(--ink); padding: 0 .16em; border-radius: .14em; display: inline-block; transform: rotate(-1.5deg); box-decoration-break: clone; -webkit-box-decoration-break: clone }
.count { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 650 }
main { max-width: 1040px; margin: 0 auto; padding: 26px 20px 80px }

/* Start */
.hero { text-align: center; padding: 34px 0 10px }
.hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 850; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance }
.hero h1 .hl { margin-top: .12em }
/* The headline and its paragraph on the left, the globe on the right; on a narrow screen the globe goes under the words */
.hero-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; text-align: left }
.hero-top .lede { margin: 18px 0 0; max-width: none }
/* The product's name in the hero paragraph, in the logo's colours: the name in ink (white on dark), ".ai" in violet */
.lede .name { color: var(--text) } .lede .name span { color: var(--accent) }
/* The name in running text, as the logo writes it: TheLingo in the logo's ink, .ai in its violet. On the dark theme the ink
   would vanish, so it takes the text colour and the lighter violet the dark logo uses. */
.brandname { color: var(--ink); font-weight: inherit; white-space: nowrap } .brandname span { color: var(--violet) }
html[data-theme="dark"] .brandname { color: var(--text) } .band.cta .brandname { color: #fff } html[data-theme="dark"] .brandname span, .band.cta .brandname span { color: var(--violet-2) }
.hero-art { min-width: 0; align-self: start; margin-top: -30px }
/* The globe's key: the three kinds of people on one line, the places they talk centred under them. Set here, so the globe block stays as given. */
.hero-art .lingo-globe-key { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px 22px; margin-top: 0 }
.hero-art .lingo-globe-key li:nth-child(4) { grid-column: 1 / -1; justify-self: center }
@media (max-width: 860px) { .hero-top { grid-template-columns: 1fr; text-align: center; gap: 10px } .hero-top .lede { margin: 16px auto 0; max-width: 640px } .hero-art { max-width: 460px; width: 100%; margin: 0 auto } .hero-art .lingo-globe-key { gap: 8px 14px; font-size: 12.5px } }
.lede { max-width: 640px; margin: 16px auto 0; color: var(--muted); font-size: 17px; text-wrap: pretty }
.start { display: flex; gap: 8px; max-width: 600px; margin: 26px auto 0 }
.start input { flex: 1; font-size: 17px; padding: 13px 16px; border-radius: 12px; min-width: 0 }
.start button { font-size: 16px; padding: 12px 20px; border-radius: 12px; white-space: nowrap }
.edge { display: block; width: 100%; max-width: 600px; margin: 8px auto 0; padding: 9px 14px; border-radius: 10px; font-size: 14.5px }
.opts { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 13.5px }
.opts select { padding: 3px 6px; font-size: 13.5px }
.opts input[type=number] { width: 86px; padding: 3px 6px; font-size: 13.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; outline: none }
/* The "i" beside a question, and what it opens */
.more label .info, button.info { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin: 0 0 0 4px; border: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: italic 800 12px/1 Georgia, serif; cursor: help; position: relative; vertical-align: 2px }
.more label .info .tip, .info .tip { display: none; position: absolute; left: 50%; top: 26px; transform: translateX(-50%); width: min(360px, 78vw); background: var(--ink); color: #fff; font: 400 13px/1.5 -apple-system, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif; padding: 12px 14px; margin: 0; border-radius: 12px; z-index: 6; text-align: left; box-shadow: var(--shadow); cursor: default }
.more label .info .tip b { color: var(--lime); font-weight: 700 }
.info:hover .tip, .info:focus-visible .tip, .info.open .tip, .more label .info:hover .tip, .more label .info:focus-visible .tip, .more label .info.open .tip { display: block }
.msg { min-height: 20px; margin-top: 10px; font-size: 14px; color: var(--muted) } .msg.err { color: var(--bad) }
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px }
.how > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px }
.how b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px 9px 9px 3px; background: var(--lime); color: var(--ink); font-size: 13.5px; font-weight: 800 }
.how h3 { font-size: 15px; margin: 10px 0 4px } .how p { color: var(--muted); font-size: 13.5px }
@media (max-width: 820px) { .how { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .how { grid-template-columns: 1fr } .start { flex-direction: column } }
.reports { margin-top: 38px } .reports h2 { font-size: 18px; margin-bottom: 10px }
.rep { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; text-align: left; width: 100% }
.rep:hover { border-color: var(--accent) }
.rep .t { font-weight: 650 } .rep .m { color: var(--muted); font-size: 13px }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px }
.card h2 { font-size: 24px; letter-spacing: -.015em }
.band h2, .h, .card h2, .verdict p { font-weight: 800 }
.eyebrow { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 4px }
.head p { margin-top: 12px; font-size: 16px } .actions { display: flex; gap: 6px; flex-wrap: wrap }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.chip { font-size: 12.5px; padding: 2px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted) }
.chip.ok { background: var(--good-soft); color: var(--good); border-color: transparent } .chip.err { background: var(--bad-soft); color: var(--bad); border-color: transparent } .chip.run { background: var(--info-soft); color: var(--info); border-color: transparent }
.notice { border-radius: 10px; padding: 10px 14px; background: var(--soft); margin-top: 12px; font-size: 14px } .notice.bad { background: var(--bad-soft); color: var(--bad) }

/* Working */
.steps { list-style: none; margin: 18px 0 6px; padding: 0 }
.steps li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; color: var(--faint) }
.steps li i { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: inline-grid; place-items: center; font-style: normal; font-size: 12px; transform: translateY(3px) }
.steps li.done { color: var(--text) } .steps li.done i { background: var(--good); border-color: var(--good); color: #fff }
.steps li.now { color: var(--text); font-weight: 650 } .steps li.now i { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite }
.steps li span { color: var(--muted); font-weight: 400; font-size: 13.5px }
@keyframes spin { to { transform: translateY(3px) rotate(360deg) } }

/* Report */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr } }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px }
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 } .stat .l { color: var(--muted); font-size: 13px }
.stat.key .n { color: var(--accent) }
.verdict p { font-size: 20px; line-height: 1.4; letter-spacing: -.005em; text-wrap: pretty }
.section { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px }
.fix { display: grid; grid-template-columns: 1fr; gap: 12px } /* one column: a work order needs the width for the text to paste */
.fix .item { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px }
.fix .item h4 { font-size: 16px; margin-bottom: 4px } .fix .item p { font-size: 14px; color: var(--muted); margin-top: 6px }
.fix .num { color: var(--accent); font-weight: 800; margin-right: 6px }
/* The report's sections: three labelled groups in one bar that wraps (never scrolls sideways) and stays under the header
   while a long report is read. Content, the deliverable, is in the brand lime. */
.tabs { position: sticky; top: 58px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 26px 0 16px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 20px -16px rgba(16, 18, 43, .45) }
.tabgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px }
.tabgroup + .tabgroup { padding-left: 14px; border-left: 1px solid var(--line) }
.tg-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-right: 6px }
.tabs button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; background: none; padding: 6px 12px; color: var(--text); font-weight: 600; font-size: 14px; white-space: nowrap }
.tabs button:hover { background: var(--soft) }
.tabs button .count { margin: 0; background: var(--soft); color: var(--muted); font-size: 11.5px; padding: 1px 7px }
.tabs button.deliver { background: var(--lime); color: var(--ink) } .tabs button.deliver .count { background: rgba(16, 18, 43, .1); color: var(--ink) }
.tabs button.on, .tabs button.on:hover { background: var(--accent); color: var(--on-accent) } .tabs button.on .count { background: rgba(255, 255, 255, .22); color: inherit }
/* On a phone: one row to swipe, fading at the right edge so it is plain there is more; the chosen tab is scrolled into view. */
@media (max-width: 760px) {
  .tabs { position: static; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent) }
  .tabs::-webkit-scrollbar { display: none }
  .tabgroup { flex-wrap: nowrap } .tg-label { display: none } .tabgroup + .tabgroup { padding-left: 0; border-left: none }
  .tabs .tabgroup:last-child { padding-right: 28px }
}
/* The signed-in header has more buttons than a phone is wide: they wrap under the logo instead of widening the page. */
@media (max-width: 560px) { .top { flex-wrap: wrap; row-gap: 2px; padding: 10px 14px } .top .grow { flex-basis: 0 } .top button, .top .toplink { padding-left: 8px; padding-right: 8px } }
/* A choice inside a section (which content, which posts): a grey switch, so it never reads as more tabs. */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin-bottom: 14px; background: var(--soft); border-radius: 12px }
.segmented button { border: none; background: none; border-radius: 9px; padding: 6px 13px; color: var(--muted); font-weight: 600; font-size: 14px }
.segmented button:hover { background: rgba(16, 18, 43, .05); color: var(--text) }
.segmented button.on, .segmented button.on:hover { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(16, 18, 43, .18) }
.segmented .n { margin-left: 6px; color: var(--faint); font-weight: 500 }
html[data-theme="dark"] .segmented button:hover { background: rgba(255, 255, 255, .06) }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px }
.item h4 { font-size: 17px; letter-spacing: -.005em }
.item .line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 }
/* Labels keep their size (squeezed, their text ran over the next one); a long one wraps inside its own bubble instead of
   pushing the page wider than a phone. */
@media (max-width: 560px) { #panel .item > table { display: block; overflow-x: auto } } /* a wide table scrolls inside its card on a phone */
.item .line > * { flex-shrink: 0 } .item .line > .signal { flex-shrink: 1; min-width: 0; white-space: normal } .item .line .tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere }
.item p { margin-top: 8px }
.tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; font-weight: 600; background: var(--soft); color: var(--muted); white-space: nowrap }
.tag.bad { background: var(--bad-soft); color: var(--bad) } .tag.warn { background: var(--warn-soft); color: var(--warn) } .tag.good { background: var(--good-soft); color: var(--good) } .tag.info { background: var(--info-soft); color: var(--info) } .tag.open { background: var(--accent-soft); color: var(--accent) }
.signal { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted) } .signal b { color: var(--text) }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px } .bars i { width: 5px; border-radius: 2px; background: var(--line) }
.bars i:nth-child(1) { height: 6px } .bars i:nth-child(2) { height: 10px } .bars i:nth-child(3) { height: 14px }
.bars.weak i:nth-child(1), .bars.medium i:nth-child(-n+2), .bars.strong i { background: var(--accent) }
blockquote { margin: 10px 0 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--soft); border-radius: 0 9px 9px 0; font-size: 14.5px }
blockquote cite { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 3px }
.label { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 14px }
.copy { position: relative; background: var(--accent-soft); border-radius: 10px; padding: 12px 74px 12px 14px; margin-top: 8px } .copy h5 { font-size: 17px; margin: 0 0 4px } .copy p { margin: 0; white-space: pre-wrap }
.copy .tiny { position: absolute; top: 8px; right: 8px }
.swap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px } @media (max-width: 640px) { .swap { grid-template-columns: 1fr } }
.swap > div { border-radius: 10px; padding: 10px 12px; font-size: 14.5px } .swap .now { background: var(--bad-soft) } .swap .new { background: var(--good-soft) }
.swap .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: block; margin-bottom: 2px }
table { border-collapse: collapse; width: 100%; font-size: 14px } th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top } th { color: var(--muted); font-weight: 600; border-top: none; font-size: 12.5px }
.post .text { white-space: pre-wrap; word-break: break-word; max-height: 6.2em; overflow: hidden; color: var(--muted); font-size: 14px; margin-top: 6px } .post .text.open { max-height: none }
.post .more { border: none; background: none; padding: 0; color: var(--accent); font-size: 13px; margin-top: 2px }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px } .filters button.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650 }
.empty { text-align: center; color: var(--muted); padding: 30px 10px }
ul.plain { margin: 8px 0 0; padding-left: 20px } ul.plain li { margin: 4px 0 }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; overflow-y: auto; z-index: 10 }
@media print { .top, .actions, .tabs, .drawer, .tiny, .more, .filters, .segmented { display: none !important } body { background: #fff } .card, .item, .stat { box-shadow: none; break-inside: avoid }
  .printbrand { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--violet); padding-bottom: 10px; margin-bottom: 16px; color: var(--muted); font-size: 12px } .printbrand img { height: 30px; width: auto } }

/* Landing */
.band { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; margin-top: 30px }
.band h2 { font-size: clamp(21px, 3vw, 28px); letter-spacing: -.015em; line-height: 1.2; text-wrap: balance } .band p { color: var(--muted); font-size: 16px; margin-top: 10px; max-width: 760px; text-wrap: pretty }
.h { font-size: 22px; letter-spacing: -.01em; margin: 38px 0 12px }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
@media (max-width: 820px) { .grid3, .grid4 { grid-template-columns: 1fr 1fr } } @media (max-width: 520px) { .grid3, .grid4 { grid-template-columns: 1fr } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px } .tile h3 { font-size: 15.5px; margin-bottom: 5px } .tile p { color: var(--muted); font-size: 14px }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px } .checks li { padding-left: 28px; position: relative; color: var(--muted) } .checks li b { color: var(--text) }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 6px 6px 6px 2px; background: var(--lime); color: var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 800 }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px } @media (max-width: 640px) { .nums { grid-template-columns: 1fr 1fr } }
.nums.six { grid-template-columns: repeat(3, 1fr) } @media (max-width: 640px) { .nums.six { grid-template-columns: 1fr 1fr } }
.band .points { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 16px; display: grid; gap: 6px; max-width: 760px }
.band:not(.cta) p b { color: var(--text) }
.nums div { background: var(--soft); border-radius: 12px; padding: 12px 14px } .nums b { display: block; font-size: 28px; letter-spacing: -.02em; line-height: 1.1 } .nums .hot { color: var(--accent) } .nums span { color: var(--muted); font-size: 13px }
.toplink { color: var(--text); text-decoration: none; padding: 7px 13px; border-radius: 9px } .toplink:hover { background: var(--soft) }
@media (max-width: 520px) { .toplink { display: none } }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px } @media (max-width: 640px) { .plans { grid-template-columns: 1fr } }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px } .plan.best { border: 2px solid var(--accent) }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--muted); cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent }
.agree input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none } .agree a { font-weight: 600 }
.agree.nudge { border-color: var(--bad); background: var(--bad-soft); color: var(--text) }
.foot .legal-links a { color: var(--muted) }
/* The Terms of Service and Refund Policy pages */
.legal { max-width: 780px; margin: 0 auto; padding: 34px 20px 50px }
.legal h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 850; letter-spacing: -.03em }
.legal h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 30px 0 6px }
.legal p, .legal li { line-height: 1.68; margin-top: 8px; font-size: 15.5px } .legal ul { padding-left: 22px; margin: 6px 0 0 }
/* Contact us */
.contact .card { margin-top: 18px } .contact select, .contact textarea { padding: 9px 12px; font: inherit; font-size: 15px; font-weight: 400; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 9px; outline: none }
.contact textarea { resize: vertical; min-height: 140px } .contact select:focus, .contact textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.captcha { display: grid; gap: 8px } .captchaLabel { font-size: 13.5px; font-weight: 600 } .captchaRow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.captchaRow img { border-radius: 10px; border: 1px solid var(--line); background: #F4F3FF; max-width: 100% } .captcha input { max-width: 200px; letter-spacing: .3em; font-size: 18px }
.balances { margin-top: 12px } .balances h4 { margin-bottom: 4px } .balances p { margin-top: 6px; font-size: 14.5px }
.fixitem .row { align-items: flex-start; gap: 12px } .fixitem.done { opacity: .6 } .fixitem.done h4 { text-decoration: line-through }
.donebox { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer }
.wo { margin-top: 12px; border-top: 1px solid var(--line); display: grid }
.wo-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line) } .wo-row:last-child { border-bottom: none }
.wo-row .k { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-top: 3px }
.wo-row.ask .k { color: var(--warn) } .wo-row .copy { margin: 0 }
.wo blockquote, .wo-why blockquote { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--soft); border-radius: 0 8px 8px 0 }
.wo-why { margin-top: 6px } .wo-why summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent) }
@media (max-width: 560px) { .wo-row { grid-template-columns: 1fr; gap: 4px } }
/* thelingo.ai/1, the sample home page built from TheLingo.ai's own rebuild brief */
.sample-bar .brandname { color: #fff } .sample-bar .brandname span { color: var(--violet-2) }
.sample-bar { background: var(--ink); color: #fff; text-align: center; font-size: 13.5px; padding: 8px 16px } .sample-bar a { color: var(--lime); margin-left: 6px }
main.sample { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px }
.s-hero { text-align: center; padding: 56px 0 26px } .s-hero h1 { font-size: clamp(32px, 5.4vw, 56px); font-weight: 850; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; max-width: 900px; margin: 6px auto 0 }
.s-hero .lede { max-width: 720px; margin: 18px auto 0; font-size: 18px; color: var(--muted) }
.s-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px }
.s-btn { display: inline-block; padding: 12px 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; text-decoration: none }
.s-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) } .s-btn.lime { background: var(--lime); border-color: var(--lime); color: var(--ink); margin-top: 16px }
.s-edge { margin-top: 18px } .s-edge .tile { border-top: 3px solid var(--accent) }
.s-block { margin-top: 16px; padding: 14px 18px; background: var(--accent-soft); border-radius: 12px } .s-block h3 { font-size: 16px } .s-block p { margin-top: 6px }
.s-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; max-width: 640px } .s-plans .tile .s-price { font-size: 30px; font-weight: 850; color: var(--text); margin-top: 4px } .s-plans .tile .s-price span { font-size: 15px; font-weight: 500; color: var(--muted) }
@media (max-width: 560px) { .s-plans { grid-template-columns: 1fr } .s-hero { padding-top: 34px } }
.legal .callout { background: var(--accent-soft); border-radius: 14px; padding: 14px 20px 16px; margin: 20px 0 6px } .legal .callout p:first-child { margin-top: 0 }
.legal .conspicuous { font-size: 14px; line-height: 1.6; background: var(--soft); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 0 10px 10px 0 }
.plan .planbtn { margin-top: 16px; width: 100%; padding: 11px 16px; border-radius: 11px; font-size: 15.5px }
.adform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-top: 12px }
.adform label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.adform input, .adform select { padding: 7px 10px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-weight: 400 }
#admin .stats { grid-template-columns: repeat(4, 1fr) } #admin table td { vertical-align: middle } #admin select { font-size: 13px; padding: 3px 6px }
.plan .price { font-size: 44px; font-weight: 850; letter-spacing: -.03em; line-height: 1.1; margin: 2px 0 2px } .plan .price span { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted) }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; margin-bottom: 8px } .faq summary { cursor: pointer; font-weight: 650 } .faq p { color: var(--muted); margin-top: 8px }
.cta { text-align: center } .cta p { margin: 8px auto 16px } .cta button { font-size: 16px; padding: 12px 22px; border-radius: 12px }
/* The closing band is ink in either theme, with the lime button, like the logo on dark */
.band.cta { background: var(--ink); border-color: var(--ink); color: #fff; padding: 34px 28px; position: relative; overflow: hidden }
.band.cta p { color: #c9cbe6; max-width: none } .band.cta .bubbles { display: block; width: 76px; height: auto; margin: 0 auto 14px }
.band.cta button.primary { background: var(--lime); border-color: var(--lime); color: var(--ink) }
html[data-theme="dark"] .band.cta { background: var(--panel); border-color: var(--line) }
.foot { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; margin-top: 34px }
.foot img { height: 26px; width: auto }
.printbrand { display: none }

/* The optional questions on the start form, and answering "Check these first" */
.more { max-width: 600px; margin: 10px auto 0; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px }
.more summary { cursor: pointer; font-weight: 600; font-size: 14.5px } .more[open] summary { margin-bottom: 6px }
.more label { display: block; font-size: 13.5px; font-weight: 600; margin-top: 12px } .more label input { display: block; width: 100%; margin-top: 4px; font-weight: 400; font-size: 14.5px; padding: 8px 11px }
.more label span { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 3px }
.ask .choice { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px } .ask .choice input { flex: 1; min-width: 180px; font-size: 14px }
.ask .choice button.on.yes { background: var(--good-soft); color: var(--good); border-color: transparent; font-weight: 650 } .ask .choice button.on.no { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 650 }
.bar { position: sticky; bottom: 12px; display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); margin-top: 12px }
.told { display: grid; gap: 4px; margin-top: 8px; font-size: 14px } .told b { font-weight: 600 }

/* Website or idea, and the list of places */
.mode { display: inline-flex; gap: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 11px; padding: 3px; margin-top: 70px } /* about half an inch lower than it first was, below the globe and its key (owner: down .75 inch, then back up .25) */
.mode button { border: none; background: none; padding: 6px 14px; border-radius: 8px; color: var(--muted); font-weight: 600 } .mode button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow) }
.start { margin-top: 12px } .start.tall { flex-direction: column } .start.tall button { align-self: flex-end }
.start textarea { flex: 1; min-height: 120px; font: inherit; font-size: 16px; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); resize: vertical; outline: none }
.start textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.place .big { text-align: right; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--faint) } .place .big.hot { color: var(--accent) }
.place .big span { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 3px }
.how5 { grid-template-columns: repeat(5, 1fr) } @media (max-width: 980px) { .how5 { grid-template-columns: 1fr 1fr } } @media (max-width: 520px) { .how5 { grid-template-columns: 1fr } }

.sub { color: var(--muted); max-width: 760px; margin: -4px 0 14px; font-size: 16px }

/* Sign in and Settings */
.narrow { max-width: 420px; margin: 40px auto }
.stack { display: grid; gap: 12px; margin-top: 14px } .stack label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600 }
.stack input, .keyrow input, .airow input { padding: 9px 12px; font-size: 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; outline: none; font-weight: 400 }
.stack input:focus, .keyrow input:focus, .airow input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
#settings h3 { font-size: 16px; margin-bottom: 4px }
.keyrow { padding: 14px 0; border-top: 1px solid var(--line) } .keyrow:first-child { border-top: none }
.keyrow .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .keyrow .head b { font-size: 15px }
.keyrow .entry { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap } .keyrow .entry input { flex: 1; min-width: 200px }
.keyrow .res { font-size: 13px; margin-top: 6px; color: var(--muted) } .keyrow .res.ok { color: var(--good) } .keyrow .res.err { color: var(--bad) }
.airow { display: flex; align-items: center; gap: 10px; padding: 9px 0; flex-wrap: wrap } .airow label { display: flex; align-items: center; gap: 8px; min-width: 190px; font-weight: 600 } .airow input[type=text] { flex: 1; min-width: 180px }
.airow.off { opacity: .55 }

/* The free-text boxes on the start form are textareas, so a browser or password manager does not take one for a sign-in field */
textarea.edge, .more textarea { display: block; width: 100%; font: inherit; font-size: 14.5px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); resize: vertical; min-height: 38px; outline: none }
.more textarea { margin-top: 4px; font-weight: 400 } textarea.edge { max-width: 600px; margin: 8px auto 0 }
textarea.edge:focus, .more textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }

.btnlink { display: inline-block; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 7px 13px; color: var(--text); text-decoration: none; white-space: nowrap } .btnlink:hover { background: var(--soft) }
.btnlink.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650 } .btnlink.primary:hover { filter: brightness(1.07) }
.seeit { border-left: 4px solid var(--accent) } .seeit p { margin-top: 4px }
/* Head to head grid: one row per buyer concern, one column per competitor */
.item.scroll { overflow-x: auto } table.grid th, table.grid td.vs { text-align: center; white-space: nowrap } table.grid th:first-child { text-align: left }
td.vs { font-weight: 700; font-size: 15px } td.vs.good { color: var(--good) } td.vs.warn { color: var(--warn) } td.vs.bad { color: var(--bad); opacity: .7 }
.how6 { grid-template-columns: repeat(3, 1fr) } @media (max-width: 820px) { .how6 { grid-template-columns: 1fr 1fr } } @media (max-width: 520px) { .how6 { grid-template-columns: 1fr } }

/* The public sample report: read only, with a note saying what it is. */
.sample-note { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: var(--accent, #5B4BFF); }
.sample-note > div { flex: 1 1 320px; }
#report.is-sample #rewriteAllBtn, #report.is-sample #againBtn, #report.is-sample #deleteBtn, #report.is-sample .choice, #report.is-sample #rewriteBtn, #report.is-sample #pickCount { display: none; }
.sample-cta { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }