/* Shell marketing. Builds on webos.css, which holds the base, the header, the
   footer and both themes, and then takes Shell's own palette and radii, the
   same as shell.css does for the workspace.

   This is the front door for the product the workspace is. It looked like
   WebOS because it inherited WebOS: the shop window and the shop were two
   different designs. */

.crm {
  --bg:      #f6f6f4;
  --surface: #ffffff;
  --raise:   #efefec;
  --ink:     #141312;
  --muted:   #6f6d68;
  --line:      rgba(20, 19, 18, .12);
  --line-soft: rgba(20, 19, 18, .08);
  --accent:      #16c65e;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(22, 198, 94, .12);
  --accent-text: #0e7d3b;
  /* The rainbow. Light-ground values, each scaled toward black until it
     clears 4.5:1, the same set shell.css carries for the workspace. */
  --rb-red:    var(--tl-crimson-ink);
  --rb-orange: var(--tl-red-ink);
  --rb-amber:  var(--tl-amber-ink);
  --rb-green:  var(--tl-green-ink);
  --rb-teal:   var(--tl-teal-ink);
  --rb-cyan:   var(--tl-cyan-ink);
  --rb-blue:   var(--tl-blue-ink);
  --rb-indigo: var(--tl-indigo-ink);
  --rb-violet: var(--tl-violet-ink);
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
}
/* Dark unless the visitor has asked for light.
   This used to sit inside @media (prefers-color-scheme: dark), which made the
   page light-first and the operating system the one deciding. The BrandOS
   bundle has always forced dark and stored the choice under tl-theme, so on a
   Mac set to Light the home page came up black and /web, /audit and /privacy
   on the same host came up cream. One site, two answers.
   The media wrapper is gone and the rule itself is unchanged: it still yields
   to an explicit [data-theme="light"], so the toggle works both ways. */
:root:not([data-theme="light"]) .crm {
  --bg:      #0a0a0a;
  --surface: #151515;
  --raise:   #1e1e1e;
  --ink:     #f3f2f0;
  --muted:   #9c9a95;
  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .07);
  --accent:      #2fe172;
  --accent-ink:  #06210f;
  --accent-soft: rgba(47, 225, 114, .16);
  --accent-text: var(--accent);
  --rb-red:    var(--tl-crimson-ink);
  --rb-orange: var(--tl-red-ink);
  --rb-amber:  var(--tl-amber-ink);
  --rb-green:  var(--tl-green-ink);
  --rb-teal:   var(--tl-teal-ink);
  --rb-cyan:   var(--tl-cyan-ink);
  --rb-blue:   var(--tl-blue-ink);
  --rb-indigo: var(--tl-indigo-ink);
  --rb-violet: var(--tl-violet-ink);
}

:root[data-theme="dark"] .crm {
  --bg:      #0a0a0a;
  --surface: #151515;
  --raise:   #1e1e1e;
  --ink:     #f3f2f0;
  --muted:   #9c9a95;
  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .07);
  --accent:      #2fe172;
  --accent-ink:  #06210f;
  --accent-soft: rgba(47, 225, 114, .16);
  --accent-text: var(--accent);
    --rb-red:    var(--tl-crimson-ink);
    --rb-orange: var(--tl-red-ink);
    --rb-amber:  var(--tl-amber-ink);
    --rb-green:  var(--tl-green-ink);
    --rb-teal:   var(--tl-teal-ink);
    --rb-cyan:   var(--tl-cyan-ink);
    --rb-blue:   var(--tl-blue-ink);
    --rb-indigo: var(--tl-indigo-ink);
    --rb-violet: var(--tl-violet-ink);
}

.chain { list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.chain-step a { display: block; background: var(--surface); padding: 20px 18px;
  text-decoration: none; height: 100%;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.chain-step a:hover { border-color: var(--accent-text, var(--accent)); }
.chain-num { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: var(--faint); }
.chain-name { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  margin: 6px 0 3px; }
.chain-verb { display: block; font-size: 12px; color: var(--muted); }

.layers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.layer { border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 20px 22px; background: var(--surface); }
.layer-tag { font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; color: var(--accent-text, var(--accent)); margin: 0 0 8px; }
.layer h3 { margin: 0 0 8px; font-size: 20px; }
.layer p { font-size: 14.5px; color: var(--muted); margin: 0; }

.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--line-soft); border: 1px solid var(--line-soft); }
.problem { background: var(--bg); padding: 18px 20px; }
.problem-says { font-size: 15.5px; margin: 0 0 8px; line-height: 1.45; }
.problem-app { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; }
.problem-app a { color: var(--accent-text, var(--accent)); text-decoration: none; }
.problem-app a:hover { text-decoration: underline; }

.apps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.app { border: 1px solid var(--line); padding: 22px; background: var(--surface);
  display: flex; flex-direction: column; }
.app-num { font-size: 11px; letter-spacing: .18em; font-weight: 800; color: var(--faint); margin: 0 0 8px; }
.app h3 { margin: 0 0 2px; font-size: 21px; }
.app-verb { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--accent-text, var(--accent)); margin: 0 0 10px; }
.app-desc { font-size: 14.5px; color: var(--muted); }
.app-does { list-style: none; margin: 0 0 16px; padding: 0; }
.app-does li { font-size: 13.5px; color: var(--muted); padding: 8px 0;
  border-top: 1px solid var(--line-soft); }
.app-price { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: auto 0 12px; }
.app-price span { font-size: 13px; font-weight: 400; color: var(--faint); }
.app form { margin: 0; }

/* The recommended plan is a filled card, the way the prototype draws it and
   the way WebOS now does. A two-pixel border says "this one is outlined"; a
   fill says "take this one", which is the job of the thing. */
/* The fill and its ink must be a *pair*. This card filled with --accent and
   inked with --accent-ink, which are not a pair on the light theme: --accent
   is the bright #16c65e and --accent-ink is white, so every line on the
   recommended plan measured 2.26:1. The same 2.26:1 this file already warns
   about for .btn.primary, which was fixed and this was not.

   --cta / --cta-ink are the pair. checks/kit.js measures them on every
   surface in both themes and fails below 4.5:1, so this cannot come back. */
.plan.featured { background: var(--cta); border-color: var(--cta); color: var(--cta-ink);
  position: relative; }
.plan.featured .plan-desc,
.plan.featured .plan-does li,
.plan.featured .plan-price span,
.plan.featured .plan-saving { color: var(--cta-ink); opacity: .8; }
.plan.featured .plan-saving { opacity: 1; font-weight: 700; }
/* On a filled card the button has to invert or it vanishes into the fill. */
.plan.featured .btn,
.plan.featured .btn.primary { background: var(--cta-ink); border-color: var(--cta-ink);
  color: var(--cta); }
.plan.featured .btn:hover,
.plan.featured .btn.primary:hover { filter: brightness(1.35); background: var(--cta-ink);
  color: var(--cta); }
.plan.featured::before { content: 'Most chosen'; position: absolute; top: -12px; left: 24px;
  background: var(--cta-ink); color: var(--cta); border-radius: var(--r-pill);
  padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; }
.plan-saving { font-size: 13px; color: var(--accent-text, var(--accent)); }

.ptable { width: 100%; border-collapse: collapse; }
.ptable td { padding: 14px 10px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.ptable td:first-child { padding-left: 0; }
.ptable td:last-child { text-align: right; padding-right: 0; }
.t-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.t-price { font-weight: 800; white-space: nowrap; }
.t-price span { font-weight: 400; font-size: 12px; color: var(--faint); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text, var(--accent));
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- the guided chooser ---- */
.guide { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.g-top { padding-top: 28px; }
.g-bar { height: 3px; background: var(--line-soft); }
.g-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.g-count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--faint); margin: 10px 0 0; }
.g-count strong { color: var(--ink); }
.g-body { padding: 26px 0 60px; }
.g-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 800; color: var(--accent-text, var(--accent)); margin: 0 0 12px; }
.g-ask { font-size: clamp(26px, 4.5vw, 38px); margin: 0 0 12px; }
.g-why { font-size: 15.5px; color: var(--muted); margin: 0 0 26px; max-width: 58ch; }

.g-opts { display: grid; gap: 8px; margin: 0 0 24px; }
.g-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.g-opt:hover { border-color: var(--ink); }
.g-opt.on, .g-opt:has(input:checked) { border-color: var(--accent-text, var(--accent)); background: var(--accent-soft); }
.g-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-key { flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--faint); }
.g-opt.on .g-key, .g-opt:has(input:checked) .g-key {
  background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.g-label { font-size: 15.5px; font-weight: 500; }
.g-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* .btn.ghost is the quiet button, defined in tl-components.css. */
.g-note { font-size: 13px; color: var(--faint); margin: 12px 0 0; }
.g-back { margin-top: 18px; }
.g-fine { font-size: 13px; color: var(--faint); margin: 18px 0 0; }

/* ---- the result ---- */
.recs { display: grid; gap: 10px; margin: 0 0 26px; }
.rec { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
  border: 1px solid var(--line); background: var(--surface); }
.rec.strong { border-left: 3px solid var(--accent); }
.rec-num { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--faint);
  margin: 3px 0 0; flex: none; }
.rec-main { flex: 1 1 auto; min-width: 0; }
.rec-main h3 { margin: 0 0 4px; font-size: 18px; }
.rec-verb { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text, var(--accent)); font-weight: 800; }
.rec-desc { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.rec-because { font-size: 12.5px; color: var(--faint); margin: 0; }
.rec-because em { font-style: normal; color: var(--muted); }
.rec-price { font-size: 17px; font-weight: 800; margin: 0; flex: none; white-space: nowrap; }
.rec-price span { font-size: 11px; font-weight: 400; color: var(--faint); }

.bundle { border: 2px solid var(--accent); padding: 22px; margin: 0 0 18px;
  background: var(--accent-soft); }
.bundle-h { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.bundle-line { font-size: 14.5px; color: var(--muted); margin: 0 0 10px; }
.bundle-maths { font-size: 14.5px; margin: 0 0 16px; }
.bundle form, .pick-form { margin: 0; }
.pick-form { margin-bottom: 26px; }

.also { border-top: 1px solid var(--line-soft); padding-top: 20px; margin-top: 6px; }
.also-h { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 800; color: var(--faint); margin: 0 0 12px; }
.also-item { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.also-item strong { color: var(--ink); }
.notes { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 22px 0; }
.notes p { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.notes p:last-child { margin: 0; }

/* ---- the brief ---- */
.brief { border: 1px solid var(--line); background: var(--surface); margin: 0 0 24px; }
.brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 18px;
  border-top: 1px solid var(--line-soft); }
.brief-row:first-child { border-top: 0; }
@media (max-width: 560px) { .brief-row { grid-template-columns: 1fr; gap: 4px; } }
.brief-q { font-size: 13px; color: var(--faint); margin: 0; }
.brief-a { font-size: 14.5px; font-weight: 600; margin: 0; }
.brief-empty { padding: 18px; margin: 0; color: var(--muted); }
.brief-rec { margin: 0 0 24px; }
.brief-form { margin: 26px 0 0; }
.brief-form h2 { font-size: 20px; margin: 0 0 14px; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .two-up { grid-template-columns: 1fr; gap: 0; } }
.agree { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 18px;
  font-size: 13.5px; color: var(--muted); }
.agree input { margin-top: 3px; flex: none; }

/* The first screen of a guided flow doubles as a landing page, so it carries
   an explanation the later screens do not need. */
.g-intro { margin: 0 0 26px; padding: 18px 20px; border: 1px solid var(--line-soft);
  background: var(--surface); }
.g-intro-lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.g-intro-points { margin: 0; padding-left: 18px; }
.g-intro-points li { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 7px; }

/* Shell is the rounded one, so its shop window is too. */
.crm .app,
.crm .layer,
.crm .bundle,
.crm .rec,
.crm .plan,
.crm .problem,
.crm .also-item,
.crm .guide,
.crm .brief,
.crm .g-opt,
.crm .notes { border-radius: var(--r-md); }
/* Small single-line marks. .t-price was in this list and is a table cell:
   it has no background, so the radius drew nothing, but a pill radius on a
   78px-tall cell is not what anyone meant. */
.crm .app-num,
.crm .layer-tag,
.crm .g-kicker { border-radius: var(--r-pill); }
.crm h1, .crm h2 { font-family: var(--font-display); }

/* ---- one app, on its own page ---- */
.app h3 a { color: inherit; text-decoration: none; }
.app h3 a:hover { color: var(--accent-text, var(--accent)); }
.app-more { margin: 12px 0 0; font-size: 13.5px; }
.app-more a { color: var(--accent-text, var(--accent)); font-weight: 700; text-decoration: none; }
.app-says { font-size: clamp(17px, 2.4vw, 21px); font-style: italic; color: var(--muted);
  border-left: 3px solid var(--accent); padding-left: 16px; margin: 22px 0; }
.two-up { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ba { padding: 24px 26px; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--surface); }
.ba p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.ba-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; margin: 0 0 10px !important; color: var(--faint); }
.ba-after { border-color: var(--accent); }
.ba-after .ba-label { color: var(--accent-text, var(--accent)); }
.app-does.big { list-style: none; padding: 0; margin: 0; }
.app-does.big li { font-size: 15.5px; padding: 12px 0 12px 26px; position: relative;
  border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.app-does.big li:last-child { border-bottom: 0; }
.app-does.big li::before { content: '\2192'; position: absolute; left: 0;
  color: var(--accent-text, var(--accent)); font-weight: 700; }
.faq { margin: 0; }
.faq dt { font-weight: 800; font-size: 16px; margin-top: 22px; }
.faq dd { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Cards, rounded and given room. These were the densest blocks on the site. */
.crm .plan { border-radius: var(--r-md); padding: 30px 28px; }
.crm .plan h3 { margin-bottom: 10px; line-height: 1.25; }
.crm .plan-does li { padding-block: 9px; line-height: 1.55; }
.crm .app { padding: 28px 26px; }
.crm .app h3 { margin-bottom: 8px; line-height: 1.25; }
.crm .app-does li { padding-block: 9px; line-height: 1.55; }
.crm .layer, .crm .problem, .crm .rec, .crm .also-item { padding: 26px 24px; }

/* ---- the family ----
   The workspace colour-codes its nine apps from the rainbow tokens and the
   shop window did not, so the two read as different products. Same ramp,
   same order: neighbours in the workflow are neighbours in hue. */
.crm .a-tq          { --app: var(--rb-red); }
.crm .a-pitch       { --app: var(--rb-orange); }
.crm .a-scope       { --app: var(--rb-amber); }
.crm .a-quote       { --app: var(--rb-green); }
.crm .a-hatch       { --app: var(--rb-teal); }
.crm .a-crm-content { --app: var(--rb-cyan); }
.crm .a-deliver     { --app: var(--rb-blue); }
.crm .a-profit      { --app: var(--rb-indigo); }
.crm .a-shell       { --app: var(--rb-violet); }
/* The other two surfaces appear in the Brand Suite and Everything bundles, so
   they need hues too or those cards come out a wall of one colour. WebOS runs
   the cool end, BrandOS the warm, which keeps each surface readable as a set. */
.crm .a-audit         { --app: var(--rb-blue); }
.crm .a-build         { --app: var(--rb-teal); }
.crm .a-watch         { --app: var(--rb-cyan); }
.crm .a-scorecard     { --app: var(--rb-red); }
.crm .a-strategy      { --app: var(--rb-orange); }
.crm .a-name          { --app: var(--rb-amber); }
.crm .a-mark          { --app: var(--rb-green); }
.crm .a-print         { --app: var(--rb-indigo); }
.crm .a-brand-content { --app: var(--rb-violet); }

.crm .app { border-top: 3px solid var(--app, var(--accent)); }
.crm .app .app-num { color: var(--app, var(--faint)); }
.crm .app .app-verb { color: var(--app, var(--accent-text, var(--accent))); }
.crm .app h3 a:hover { color: var(--app, var(--accent-text, var(--accent))); }
.crm .app-does li::marker { color: var(--app, var(--accent)); }

.crm .chain-step a { border-top: 3px solid var(--app, var(--line)); }
.crm .chain-step .chain-num { color: var(--app, var(--faint)); font-weight: 800; }
.crm .chain-step a:hover { border-color: var(--app, var(--accent));
  background: color-mix(in srgb, var(--app, var(--accent)) 7%, var(--surface)); }

/* The spectrum bar the WebOS prototype uses as its signature, in the tokens
   Shell already defines. It is the one element that says Turtle Labs before
   any words do. */
.crm .wrap.hero::before {
  content: ''; display: block; height: 4px; width: 92px; border-radius: 999px;
  margin: 0 0 26px; background: linear-gradient(90deg,
    var(--rb-red), var(--rb-orange), var(--rb-amber), var(--rb-green),
    var(--rb-teal), var(--rb-blue), var(--rb-violet));
}

/* ---- what is in a bundle ----
   Nine bare names is a list. The app's initial in its own colour, its name
   and the one word it does, so the suite can be read at a glance and the
   reader can see which apps they already recognise. */
.plan-apps { list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.plan-apps li { display: grid; grid-template-columns: 30px 1fr auto;
  align-items: center; gap: 11px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); }
.plan-apps li:last-child { border-bottom: 0; }
.pa-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 800;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--app, var(--cta)) 16%, transparent);
  /* --accent is the bright fill green; as an ink on its own 16% tint it is
     2.26:1. --cta is the value that survives being read. */
  color: var(--app, var(--cta)); }
.pa-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.pa-verb { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; }

/* On the filled card the marks invert with everything else. */
/* The chip was a translucent black plate inked with --accent-ink. On the dark
   theme that ink is near-black, so a dark mark sat on a darkened green plate
   at 1.23:1. The plate is the ink now and the mark is the fill, which is a
   pair at any theme. */
.plan.featured .pa-mark { background: var(--cta-ink); color: var(--cta); }
.plan.featured .pa-name { color: var(--cta-ink); }
.plan.featured .pa-verb { color: var(--cta-ink); opacity: .78; }
.plan.featured .plan-apps li { border-bottom-color: rgba(0,0,0,.12); }

/* The single-app table carries the same mark and hue as the plan cards above
   it, so a reader recognises the app rather than matching it by name. */
.ptable .t-mark { width: 42px; padding-right: 0; vertical-align: middle; }
.ptable .t-verb { display: inline-block; margin-left: 9px; font-size: 11px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--app, var(--cta)); vertical-align: middle; }