/* The use-case pages and Bring your AI (components/pages/use-case-page.tsx, ai-page.tsx; copy: docs/06-products/landing.md). Loads after landing.css and
   reuses its colour fields, chat pieces, tiles, notebook and AI exchange; this file adds the pages' own top, grids, comparison and safety sections.
   No inline styles (CSP style-src 'self'). */

/* The colour fields a page can take, by name (the landing's palette). */
.landing :is(.uc-top,.uc-card).sky{background:var(--sky)}
.landing :is(.uc-top,.uc-card).coral{background:var(--coral)}
.landing :is(.uc-top,.uc-card).plum{background:var(--plum)}
.landing :is(.uc-top,.uc-card).yellow{background:var(--yellow)}

/* The nav in the page's flow, above the page's own top. */
.nav.inline{position:relative}

/* Top: the words on the left, the question and Nota's app on the right */
.uc-top{padding-bottom:clamp(48px,9vh,96px)}
.uc-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(24px,6vh,72px) var(--m) 0}
.uc-words,.ai-hero{display:grid;gap:20px;justify-items:start}
.ai-hero{padding:clamp(24px,6vh,72px) var(--m) 0;max-width:min(100%,62rem)}
.kicker{font:700 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.hl-sub{font-size:clamp(48px,6.4vw,108px)}
.hl-sub span{display:block}
.uc-lede{font-size:clamp(19px,1.5vw,22px);max-width:38ch}
.uc-chat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;max-height:640px;overflow:hidden}

/* As it comes up: three moments, each a tile like the landing gallery's */
.uc-how{display:grid;gap:clamp(28px,5vh,48px)}
.uc-how h2,.uc-more h2,.ai-pick h2,.ai-safe h2{font-size:clamp(44px,5.6vw,92px)}
.uc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.uc-grid .tile{height:auto;min-height:540px;max-height:680px}

/* Your AI can help too: the landing's AI exchange, beside a line and the link */
.uc-ai{background:var(--sky);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:center}
.uc-ai h2{font-size:clamp(44px,4.6vw,80px)}
.uc-ai>div>p{margin:20px 0 28px;font-size:clamp(19px,1.5vw,22px);max-width:36ch}
.uc-ai .ask{justify-self:center;width:min(100%,460px);font-size:17px}

/* More ways to use it: the other three pages */
.uc-more{display:grid;gap:clamp(28px,5vh,48px)}
.uc-more ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.uc-card{position:relative;display:grid;gap:10px;align-content:start;min-height:220px;padding:24px 24px 64px;text-decoration:none;transition:transform .15s var(--ease)}
.uc-card:hover{transform:translateY(-3px)}
.uc-card b{font:600 clamp(28px,2.4vw,38px)/1.02 var(--serif);letter-spacing:-.02em}
.uc-card span{font-size:17px;max-width:30ch}
.uc-card .go{position:absolute;left:24px;bottom:20px;font-size:28px}

/* Bring your AI: the two ways side by side */
.ai-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);padding-top:clamp(40px,7vh,80px)}
.way{display:grid;gap:18px;align-content:start;justify-items:start;padding:clamp(24px,3vw,44px)}
.way-mcp{background:var(--ink);color:var(--paper)}
.way-key{background:var(--yellow)}
.way .tag{font:700 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border:2px solid currentColor}
.way h2{font-size:clamp(34px,3.4vw,56px);line-height:1}
.way-line{font-size:clamp(18px,1.35vw,20px);max-width:40ch}
.way .marks{display:flex;flex-wrap:wrap;gap:8px}
.way .marks li{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-weight:600;font-size:15px}
.way-mcp .marks li{background:rgb(250 250 248/.12)}
.way-key .marks li{background:rgb(250 250 248/.6)}
.way .marks img{width:18px;height:18px}
.way-mcp .marks img{background:var(--paper);border-radius:4px;padding:1px}
.steps{display:grid;gap:12px;counter-reset:step;width:100%}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:.6em;align-items:baseline;font-size:17px}
.steps li::before{content:counter(step);display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;font:700 15px/1 var(--sans)}
.way-mcp .steps li::before{background:var(--paper);color:var(--ink)}
.way-key .steps li::before{background:var(--ink);color:var(--yellow)}
.steps code{font:600 .92em/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.12em .4em;border-radius:.3em;white-space:nowrap}
.way-mcp .steps code{background:rgb(250 250 248/.14)}
.facts{display:grid;gap:8px;padding-top:16px;border-top:2px solid currentColor;width:100%;font-size:16px}
.facts li{display:grid;grid-template-columns:1.2em minmax(0,1fr);gap:.4em}
.facts li::before{content:"–"}
.way-mcp .btn{background:var(--paper);color:var(--ink)}
.way-mcp .btn:hover{background:#fff}
/* What Nota's menu says once a key is in */
.runs{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:var(--paper);border-radius:999px;font-size:15px}
.runs b{margin-right:6px}

/* Its work lands where everyone can see it: the landing's AI exchange */
.ai-show{background:var(--mint)}

/* Which one is for you */
.ai-pick{display:grid;gap:clamp(24px,4vh,40px)}
.pick-scroll{overflow-x:auto}
.ai-pick table{width:100%;min-width:560px;border-collapse:collapse;font-size:18px}
.ai-pick th,.ai-pick td{padding:16px 16px 16px 0;text-align:left;vertical-align:top;border-bottom:2px solid var(--ink)}
.ai-pick thead th{font:600 clamp(22px,1.9vw,28px)/1.1 var(--serif);letter-spacing:-.015em}
.ai-pick tbody th{font-weight:600;width:28%}
.ai-pick>p{font-size:19px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* How it stays safe: two flows, three steps each */
.ai-safe{background:var(--sand);display:grid;gap:clamp(28px,5vh,48px)}
.flows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px)}
.flow{display:grid;gap:18px;align-content:start}
.flow figcaption{font:600 clamp(26px,2.3vw,36px)/1.02 var(--serif);letter-spacing:-.02em}
.flow ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.flow ol{column-gap:36px;row-gap:12px}
.flow ol li{position:relative;padding:11px 13px;background:var(--paper);border:2px solid var(--ink);font-weight:600;font-size:15px;line-height:1.25}
.flow ol li:nth-child(2){background:var(--ink);color:var(--paper)}
.flow ol li:not(:last-child)::after{content:"→";position:absolute;right:-27px;top:50%;transform:translateY(-50%);color:var(--ink);font-weight:700}
.flow p{font-size:18px;max-width:44ch}
.tip{font-weight:600;font-size:18px}

@media (max-width:860px){
  .nav.inline{padding:16px}
  .uc-hero,.uc-ai,.ai-ways,.flows{grid-template-columns:1fr}
  .uc-hero{padding:20px 16px 0}
  .ai-hero{padding:20px 16px 0}
  .hl-sub{font-size:13vw}
  .uc-words .btn{width:100%}
  .uc-chat{padding:14px;max-height:none}
  .ai-pick table{min-width:0;font-size:15px}
  .ai-pick th,.ai-pick td{padding:12px 10px 12px 0}
  .ai-pick thead th{font-size:19px}
  .uc-grid,.uc-more ul{grid-template-columns:1fr}
  .uc-grid .tile{min-height:0}
  .uc-how h2,.uc-more h2,.ai-pick h2,.ai-safe h2,.uc-ai h2{font-size:12vw}
  .way h2{font-size:9vw}
  .flow ol{flex-direction:column;align-items:stretch;row-gap:32px}
  .flow ol li{text-align:center}
  .flow ol li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:100%;transform:translate(-50%,4px)}
}
}