/* Tasman Intelligence Lab — page-specific styles only. Base, shell, buttons, forms
   inputs, cards and footnotes now live in /brand/system/tokens.css and components.css;
   this file keeps just what those two don't cover (home, demo, plans table, prose
   and the start form). */

/* Home: hero */
.hero{padding:72px 0 var(--s-9)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.display{font:500 60px/1.05 var(--font-serif);letter-spacing:-.02em;margin:0 0 22px}
.hero .lede{margin-bottom:30px}

/* Short hero (ask-my-papers, start): just the eyebrow, h1 and lede, so it doesn't
   carry the full home-hero padding meant to balance a hero-grid card. */
.hero-short{padding:56px 0 var(--s-7)}
.hero-short .lede{margin-bottom:0}

/* Home: live demo card */
.demo-title{font:500 18px/1.3 var(--font-serif);margin:0 0 var(--s-3)}
.demo-suggest{list-style:none;margin:0 0 var(--s-3);padding:0;display:flex;flex-wrap:wrap;gap:8px}
.demo-form{display:flex;gap:8px;margin-bottom:var(--s-3)}
.ask-thread{margin:calc(-1 * var(--s-2)) 0 var(--s-3);font-size:13.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.ask-thread[hidden]{display:none}
.ask-new-topic{padding:0;border:0;background:none;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ask-new-topic:hover{color:var(--ink)}
.ask-new-topic:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.ask-new-topic:disabled{opacity:.6;cursor:default}
.demo-output{display:grid;gap:var(--s-4);margin-bottom:var(--s-3)}
.demo-output:empty{display:none}
.papers-line{font-size:13.5px;line-height:1.7;color:var(--muted);margin:calc(-1 * var(--s-1)) 0 var(--s-3)}
.papers-lab{color:var(--meta)}
.papers-line a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px;white-space:nowrap}
.papers-line a:hover{color:var(--accent-strong);text-decoration-color:var(--accent)}
.papers-line .sep{color:var(--meta);margin:0 2px}
.chip-sugg.offtopic{border-style:dashed}

/* Home: how it works */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);max-width:var(--prose)}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:var(--s-4)}
.step-mark{font:400 14px var(--font-mono);color:var(--accent);padding-top:3px}

.plan-cta-light{--b-bg:var(--accent-on-dark);--b-fg:var(--ink);--b-edge:var(--accent-on-dark);--b-hover:var(--accent-on-dark-hover)}
/* Quiet by default (also used mid-prose on services/index.html). */
.price{font:500 14px var(--font-mono);color:var(--muted)}

/* Home: also from the lab */
.services-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);border-top:1px solid var(--rule);padding-top:var(--s-5)}

/* Home and about: people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
.person h3{margin-bottom:.1em}
.role{font:500 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--meta)}

/* Home and ask-my-papers: FAQ */
.faq details{border-bottom:1px solid var(--rule);padding:var(--s-3) 0}
.faq summary{cursor:pointer;font-weight:500}

@media (max-width:1023px){.hero-grid{grid-template-columns:1fr}.display{font-size:44px}}
@media (max-width:767px){.services-2col,.people{grid-template-columns:1fr}.display{font-size:40px}.hero{padding:var(--s-7) 0 var(--s-8)}.hero-short{padding:var(--s-6) 0 var(--s-7)}}

/* Plans table (ask-my-papers compare table only) */
.table-hint{font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);display:none}
@media (max-width:760px){.table-hint{display:block}}
/* position:relative keeps the visually hidden cell text inside the scroll box on phones. */
.table-scroll{position:relative;overflow-x:auto;margin-top:2rem;border:1px solid var(--rule)}
table.plans{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
table.plans th,table.plans td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
table.plans thead th{font-family:var(--font-serif);font-weight:500;font-size:1.15rem;background:var(--paper-2)}
table.plans tbody th{font-weight:600;color:var(--muted);width:24%}
table.plans td.num{font-family:var(--font-mono)}
table.plans tfoot td{border-bottom:0}
table.plans tbody th,table.plans thead th:first-child,table.plans tfoot td:first-child{position:sticky;left:0;z-index:1}
table.plans tbody th{background:var(--paper-2)}
table.plans thead th:first-child{background:var(--paper-2)}
table.plans tfoot td:first-child{background:var(--paper-2)}

/* Prose pages (services, about, contact, privacy, terms): roomy padding and a
   narrow measure so a page of writing reads easily instead of a card grid. */
.prose-page{padding:var(--s-8) var(--gutter) var(--s-9)}
.prose-page h2{margin-top:var(--s-7)}
.prose-page p,.prose-page li{max-width:var(--prose)}
.prose-page ul{padding-left:1.2em}
.prose-page li{margin-bottom:.4em}
/* Inside a .band, the band already supplies the section's vertical spacing;
   without this, prose-page's own top/bottom padding would stack with it. */
.band .prose-page{padding-top:0;padding-bottom:0}
/* The first heading sits right after the band's own top padding; without this,
   its margin-top would add yet another gap on top of that. Later h2s keep theirs. */
.prose-page > :first-child{margin-top:0}

/* Start form */
.doors{display:grid;gap:var(--s-5);grid-template-columns:1fr 1fr}
@media (max-width:767px){.doors{grid-template-columns:1fr}}
.start-grid{display:grid;gap:clamp(40px,6vw,72px);grid-template-columns:1fr}
@media (min-width:1024px){.start-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}}
.start-form{display:grid;gap:1.4rem;max-width:40rem}
.plans-choice{border:0;margin:0;padding:0;display:grid;gap:.6rem}
.plans-choice legend{font-weight:600;margin-bottom:.6rem;padding:0}
.plan-option{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;border:1px solid var(--rule);padding:.9rem 1rem;border-radius:var(--r-md);cursor:pointer;background:var(--paper)}
.plan-option:has(input:checked){border-color:var(--ink)}
.plan-option input{margin:.3rem 0 0;accent-color:var(--accent)}
.plan-option strong{display:block}
.plan-option .muted{display:block;font-size:var(--step--1)}
.field{display:grid;gap:.35rem}
.field label{font-weight:600}
.field input,.field select,.field textarea{width:100%;min-width:0}
.field textarea{resize:vertical}
.field [aria-invalid="true"]{border-color:var(--danger);outline:1px solid var(--danger);outline-offset:-2px}
.field-hint{margin:0;font-size:var(--step--1);color:var(--muted)}
.field-error{margin:0;font-size:var(--step--1);color:var(--danger)}
.turnstile{min-height:65px}
/* Box styling (border, background, padding) comes from .notice.error in components.css;
   this just sets the parts specific to a field-problem summary. */
.form-summary strong{display:block;margin-bottom:.3rem}
.form-summary ul{margin:0;padding-left:1.1em}
.form-summary:focus{outline:2px solid var(--danger);outline-offset:2px}
.field-ok{margin:0;font-family:var(--font-mono);font-size:var(--step--1);color:var(--accent-ink)}
.send-to{margin:0 0 .75rem;color:var(--muted)}
.send-to strong{color:var(--ink)}
.form-status{margin:0;min-height:1.6em}
.form-status strong{font-weight:600}
.form-status.is-error,.form-status.is-warn{border-left:2px solid var(--danger);padding:.2rem 0 .2rem .8rem}
.form-status.is-error strong{color:var(--danger)}
.form-status.is-warn{border-left-color:var(--warning-ink)}
.form-status .btn-quiet{display:inline-block;margin-top:.6rem;font-size:.85rem;padding:.4em .8em}
.form-status pre{white-space:pre-wrap;font-family:var(--font-mono);font-size:var(--step--1);background:var(--paper-2);padding:.6rem;margin:.6rem 0 0;user-select:all}
/* Box styling (border, background) comes from .notice.ok; this sets the roomier
   padding a full success panel needs over a one-line notice. */
.start-done{padding:var(--s-5) var(--s-6)}
.done-steps{list-style:none;padding:0;margin:1rem 0 1.2rem;display:grid;gap:.5rem;counter-reset:step}
.done-steps li{counter-increment:step;display:grid;grid-template-columns:1.8rem 1fr}
.done-steps li::before{content:counter(step);font-family:var(--font-mono);color:var(--muted)}
.done-steps li.is-done::before{content:"\2713";color:var(--accent)}
.start-form button:disabled,.start-form input:disabled,.start-form select:disabled,.start-form textarea:disabled{opacity:.55;cursor:wait}
.start-aside{border-top:1px solid var(--ink);padding-top:1.2rem}
.next-steps{padding-left:1.2em;margin:0 0 1.2rem}
.next-steps li{margin-bottom:.6rem}
.start-done h2{font-size:var(--step-2)}
.start-done:focus{outline:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Home: kit section */
.kit-try{display:grid;grid-template-columns:auto minmax(200px,320px) 1fr;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-4)}
.kit-try label{font-size:14px;color:var(--muted)}
.kit-try input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
.kit-try input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kit-url{margin:0;font-size:14px;color:var(--meta)}.kit-url b{font:500 14px var(--font-mono);color:var(--ink);overflow-wrap:anywhere}
.kit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:var(--s-5)}
.kit-tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.kit-show{height:150px;background:var(--surface-2);border-bottom:1px solid var(--rule-soft);display:flex;align-items:center;justify-content:center;padding:var(--s-3)}
.kit-show img{max-height:100%;height:auto}
.kit-body{padding:var(--s-3) 18px 18px}.kit-body h3{font:500 17px/1.3 var(--font-serif);margin:0 0 4px}.kit-body p{font-size:14px;color:var(--muted);margin:0}
.kit-sig{font-size:13px;line-height:1.45;color:var(--ink);background:var(--surface);border:1px solid var(--rule-soft);border-radius:6px;padding:10px 14px;width:100%;max-width:220px}
.kit-sig b{display:block;font-weight:600}.kit-sig span{display:block;color:var(--meta)}.kit-sig .kit-sig-link{color:var(--accent-strong);text-decoration:underline;margin-top:4px}
.kit-launch,.kit-launch-demo{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;font:500 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:#f6f3ec;background:#1d1c19;border:0;border-radius:999px;cursor:pointer;background-image:linear-gradient(180deg,rgba(255,255,255,.10),transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(29,28,25,.18)}
.kit-launch .mark,.kit-launch-demo .mark,.kit-panel-head .mark{font:400 15px/1 var(--font-mono);color:#7fb3bb}
.kit-launch:focus-visible,.kit-launch-demo:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--accent-strong);text-decoration:underline;cursor:pointer}
.kit-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:var(--s-5)}.kit-cta p{margin:0}
.kit-float{position:fixed;right:24px;bottom:24px;z-index:9;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:12px;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.kit-float>*{pointer-events:auto}
.kit-float[hidden]{display:flex;opacity:0;transform:translateY(12px);pointer-events:none}
.kit-float[hidden]>*{pointer-events:none}
.kit-launch{height:48px}
.kit-panel{width:320px;max-height:min(70vh,520px);overflow:auto;background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 8px 24px rgba(29,28,25,.18);padding:14px 16px}
.kit-panel[hidden]{display:none}
.kit-panel-head{display:flex;justify-content:space-between;align-items:center;font:500 15px var(--font-serif);margin-bottom:var(--s-2)}
.kit-panel-close{border:0;background:none;font:12px var(--font-mono);color:var(--meta);cursor:pointer;padding:6px 8px;border-radius:6px}
.kit-panel-note{margin:var(--s-3) 0 0;padding-top:var(--s-2);border-top:1px solid var(--rule-soft);font-size:12.5px;color:var(--meta)}
@media (prefers-reduced-motion:reduce){.kit-float{transition:none}}
@media (max-width:1023px){.kit-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.kit-try{grid-template-columns:1fr}}
@media (max-width:560px){.kit-grid{grid-template-columns:1fr}.kit-float{right:16px;bottom:16px;left:16px}.kit-panel{width:100%}}
.kit-panel .answer{padding:14px 16px}.kit-panel .answer-body p{font-size:15px}

/* Freemium: sign-up row, assurances */
.signup-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-4)}
.btn-orcid img{margin-right:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff}
.assure{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:0 0 var(--s-5);padding:0;font-size:var(--step--1);color:var(--muted)}
.assure li{display:inline-flex;align-items:center;gap:6px}
.ic{width:16px;height:16px;flex:none;color:var(--accent)}
.hero-links{display:flex;gap:var(--s-3);font-size:var(--step--1);margin:0 0 var(--s-6)}
.hero-links span{color:var(--meta)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:end;margin-bottom:var(--s-6)}
.section-head h2{margin:0;text-wrap:balance}
.lede-sm{margin:0;color:var(--muted);max-width:46ch;justify-self:end;text-align:right}

/* Pricing hero: trial timeline */
.hero-trial{padding:72px 0 var(--s-8)}
.trial-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
.trial-line{list-style:none;margin:0;padding:var(--s-6);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow-float);display:grid;gap:0;position:relative}
.trial-line li{display:grid;grid-template-columns:72px 1fr;column-gap:var(--s-4);padding:var(--s-4) 0;position:relative}
.trial-line li+li{border-top:1px solid var(--rule-soft)}
.trial-line .day{grid-row:span 2;font:500 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.trial-line b{font:500 19px/1.3 var(--font-serif)}
.trial-line li span:last-child{color:var(--muted);font-size:var(--step--1)}

/* Billing switch */
.billing{display:inline-flex;padding:4px;margin:0 0 var(--s-5);background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-btn-lg);gap:4px}
.billing[hidden]{display:none}
.billing button{font:500 14px var(--font-sans);border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:var(--r-btn-sm);cursor:pointer;transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)}
.billing button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(29,28,25,.08),0 0 0 1px var(--rule)}
.billing .save{font:500 11px var(--font-mono);color:var(--accent);margin-left:6px;letter-spacing:.02em}
.billing button:focus-visible{box-shadow:var(--focus)}

/* Plan tiers: subgrid keeps names, prices, buttons and lists on shared lines */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);gap:0 var(--s-4);margin-bottom:var(--s-4)}
.tier{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:var(--s-3);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-6);transition:transform var(--dur-panel) var(--ease),box-shadow var(--dur-panel) var(--ease)}
@media (hover:hover){.tier:hover{transform:translateY(-2px);box-shadow:0 14px 32px -16px rgba(29,28,25,.22)}}
.tier-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-2) var(--s-3)}
.tier-head h3{margin:0;font:500 24px/1.2 var(--font-serif)}
.tier-tag,.tier-flag{margin:0;font:500 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--meta);white-space:nowrap}
.tier-flag{color:var(--ink);background:var(--accent-on-dark);padding:4px 8px;border-radius:var(--r-chip)}
.tier-pitch{margin:0;color:var(--muted)}
.tier-price{margin:var(--s-2) 0 0;display:flex;flex-direction:column;gap:2px}
.tier-price .amt{font:500 44px/1 var(--font-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier-price .per{font-size:var(--step--1);color:var(--meta)}
.tier>.btn{justify-content:center;width:100%;margin-top:var(--s-2)}
.tier-intro{margin:var(--s-3) 0 0;font:500 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--meta);border-top:1px solid var(--rule-soft);padding-top:var(--s-4)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.ticks li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45}
.ticks .ic{margin-top:3px}
.tier-note{margin:0;font-size:13px;color:var(--meta);align-self:end}
.tier-pro{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 24px 48px -24px rgba(29,28,25,.55)}
.tier-pro .tier-pitch,.tier-pro .ticks li{color:var(--on-dark)}
.tier-pro .tier-price .per,.tier-pro .tier-note,.tier-pro .tier-intro{color:var(--on-dark-muted)}
.tier-pro .tier-intro{border-top-color:rgba(246,243,236,.14)}
.tier-pro .ic{color:var(--accent-on-dark)}
.tier-wide{display:flex;justify-content:space-between;align-items:center;gap:var(--s-6);padding:var(--s-5) var(--s-6);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2);margin-bottom:var(--s-5)}
.tier-wide h3{margin:0 0 4px;font:500 20px var(--font-serif)}
.tier-wide p{margin:0;color:var(--muted);max-width:70ch}

/* What Pro adds: bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-4)}
.pro-tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-5)}
.pro-tile h3{font:500 20px/1.25 var(--font-serif);margin:0 0 6px}
.pro-tile p{margin:0;color:var(--muted);font-size:15px}
.pro-tile-hero{grid-column:span 4;display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-6);align-items:center;padding:var(--s-6)}
.pro-tile-hero h3{font-size:28px}
.reading{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);position:relative}
.reading>div{border:1px solid var(--rule-soft);border-radius:var(--r-md);padding:var(--s-4);min-height:150px}
.read-plain{background:var(--surface-2)}
.read-plain pre{margin:0;font:13px/1.6 var(--font-mono);color:var(--meta);white-space:pre-wrap}
.read-pro{background:var(--accent-soft);border-color:var(--accent-border)!important}
.read-label{font:500 11px var(--font-mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--meta)!important;margin:0 0 var(--s-2)!important}
.read-pro .read-label{color:var(--accent-strong)!important}
.eq{font:400 22px var(--font-serif)!important;color:var(--ink)!important;display:flex;align-items:center;gap:8px;margin:0 0 var(--s-3)!important}
.frac{display:inline-grid;text-align:center;font-size:18px}
.frac span:first-child{border-bottom:1px solid var(--ink);padding:0 4px}
.mini{border-collapse:collapse;font:13px var(--font-sans);width:100%}
.mini th,.mini td{padding:3px 8px;border-bottom:1px solid var(--accent-border);text-align:left;font-variant-numeric:tabular-nums}
.mini th{font-weight:600}
.reading figcaption{position:absolute;right:0;bottom:-22px;font:11px var(--font-mono);color:var(--meta)}
table.plans .ic.yes{color:var(--accent)}
table.plans .no{color:var(--rule-strong)}

/* A long button label (contact page) wraps on narrow phones rather than pushing the page sideways; on one line it looks unchanged. */
.btn-wrap{white-space:normal;height:auto;min-height:48px;max-width:100%;padding-block:12px;line-height:1.3;text-align:center}

@media (max-width:1023px){
  .tiers{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s-4)}
  .tier{grid-row:auto;grid-template-rows:none}
  .trial-grid,.pro-tile-hero{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}.pro-tile-hero{grid-column:span 2}
}
@media (max-width:767px){
  .section-head{grid-template-columns:1fr;gap:var(--s-3)}.lede-sm{justify-self:start;text-align:left}
  .tier-wide{flex-direction:column;align-items:flex-start}
  .bento,.reading{grid-template-columns:1fr}.pro-tile-hero{grid-column:auto}
  .signup-row .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.tier,.billing button{transition:none}.tier:hover{transform:none}}