/* Homepage composition, built to the design contract: tokens from mainmind.css only. */
html{scroll-behavior:smooth;scroll-padding-top:var(--s-6)}
body{font-family:var(--ui);line-height:1.5}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
h1,h2,h3{font-family:var(--display);overflow-wrap:anywhere}
.measure{width:min(1120px,calc(100% - 2 * var(--s-6)));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Top bar: the mark, two quiet links and one button. */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--display);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.glyph{display:inline-block;width:28px;height:28px;flex:none;background:var(--brand);mask:url('/mark.svg') center/contain no-repeat;-webkit-mask:url('/mark.svg') center/contain no-repeat}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);font-size:var(--t-sm)}
nav>a:not(.landing-button){color:var(--soft);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
nav>a:not(.landing-button):hover{color:var(--ink)}

/* Hero: one line, one sentence, one button. */
.hero{text-align:center;padding-block:var(--s-8) var(--s-7)}
.hero h1{font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.01em;font-weight:600;max-width:12em;margin-inline:auto;text-wrap:balance}
.hero>p{color:var(--soft);font-size:var(--t-lg);line-height:1.5;max-width:30em;margin:var(--s-5) auto 0;text-wrap:pretty}
.actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
.hero .landing-button{min-height:56px;padding-inline:var(--s-6);font-size:var(--t-md)}

h2{font-size:var(--t-xl);line-height:1.2;letter-spacing:-.005em;font-weight:600}
h3{font-size:var(--t-lg);line-height:1.3;letter-spacing:0;font-weight:600}
.plain-link{color:var(--brand-deep);font-size:var(--t-sm);font-weight:600;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.plain-link:hover{text-decoration:underline}
.landing :is(.plain-link,nav a):focus-visible{outline:2px solid var(--brand);outline-offset:4px}

/* Each pillar is a section: copy on one side, the picture on the other. */
.pillars{padding-block:var(--s-5) var(--s-8)}
.step-tiles.pillar-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.team-demo .chat-leg+.chat-leg .bubble.agent::before{background-image:url("/companions/writer.svg")}
.step-tiles.pillar-tiles li{padding:0}
.pillar-tiles a{display:block;height:100%;padding:var(--s-5);color:inherit;text-decoration:none;border-radius:var(--r)}
.pillar-tiles a:hover h3{color:var(--brand-deep)}
.pillar-tiles a:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center;padding:var(--s-7);border-radius:var(--r-lg);scroll-margin-top:var(--s-5)}
.feature+.feature{margin-top:var(--s-6)}
.feature-sunk{background:var(--sunk)}
.feature>*{min-width:0}
.feature-copy>p{color:var(--ink);font-size:var(--t-md);line-height:1.6;margin-top:var(--s-4);max-width:32em}
.feature-copy .actions{justify-content:flex-start;margin-top:var(--s-3)}
.feature-note{grid-column:1/-1;text-align:center;font-size:var(--t-sm);margin:0}
.travel-demo{margin:0;min-width:0}
.travel-demo>figcaption{font-size:var(--t-sm);font-weight:500;color:var(--soft);text-align:center;margin-bottom:var(--s-3)}
.app-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1);margin:0 0 var(--s-4);padding:var(--s-1);background:var(--paper);border-radius:var(--r-pill)}
.app-choices button{background:transparent;border:0;border-radius:var(--r-pill);color:var(--soft);min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:var(--s-2);font:500 var(--t-xs)/1.2 var(--ui);padding:var(--s-2)}
.app-choices button span{max-width:100%;overflow-wrap:anywhere}
.app-choices button[aria-pressed=true]{background:var(--card);color:var(--ink)}
.app-choices button:not(:disabled):hover{color:var(--ink)}
.app-choices button:disabled{cursor:default}
.app-choices button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.harness-logo{display:block;object-fit:contain;flex:none}
[data-theme=dark] .harness-logo{filter:invert(1)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .harness-logo{filter:invert(1)}}
.travel-chat{background:var(--card);border-radius:var(--r-lg);padding:var(--s-5) var(--s-5) 0;overflow:hidden}
.chat-leg+.chat-leg{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--edge-soft)}
.chat-app{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);color:var(--soft)}
.chat-app strong{color:var(--ink);font-weight:600}
.bubble{width:fit-content;max-width:86%;margin-top:var(--s-2);padding:var(--s-2) var(--s-4);border-radius:var(--r);font-size:var(--t-sm);line-height:1.45;overflow-wrap:anywhere}
.bubble.you{margin-left:auto;background:var(--brand-soft);color:var(--brand-on-soft);border-bottom-right-radius:var(--s-1)}
.bubble.agent{position:relative;margin-left:48px;background:var(--sunk);color:var(--ink);border-bottom-left-radius:var(--s-1)}
.bubble.agent::before{content:"";position:absolute;left:-48px;bottom:-4px;width:40px;height:40px;background:url("/companions/job-hunter.svg") center/contain no-repeat}
.decide-card .bubble.agent::before{background-image:url("/companions/shop-helper.svg")}
.agent-name{display:block;font-size:var(--t-xs);font-weight:600;color:var(--brand-deep);margin-bottom:2px}
.travel-status{margin:var(--s-5) calc(-1 * var(--s-5)) 0;padding:var(--s-3) var(--s-4);min-height:48px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-on-soft);font-size:var(--t-xs);font-weight:500;text-align:center}
.illustration-note{text-align:center;font-size:var(--t-xs);color:var(--soft);margin:var(--s-3) 0 0}
.illustration-note a{color:var(--soft)}
.travel-chat.moved .chat-leg{animation:leg-in .45s var(--ease) both}
.travel-chat.moved .chat-leg+.chat-leg{animation-delay:.2s}
.travel-chat.moved .chat-leg+.chat-leg .bubble.agent{animation:leg-in .45s var(--ease) .7s both}
@keyframes leg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Three steps, each a tile with one icon. */
.steps{padding-block:var(--s-8) 0}
.steps h2{text-align:center}
.step-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin:var(--s-6) 0 0;padding:0;list-style:none}
.step-tiles li{min-width:0;background:var(--card);border-radius:var(--r);padding:var(--s-5)}
.step-tiles svg{width:28px;height:28px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.step-tiles h3{margin:var(--s-4) 0 var(--s-1)}
.step-tiles p{font-size:var(--t-md);line-height:1.5;color:var(--ink)}

/* Knowledge that grows: one page with what was learned folded in. */
.grow-demo{margin:0}
.grow-page{background:var(--card);border-radius:var(--r-lg);padding:var(--s-5);border:1px solid var(--edge-soft)}
.grow-head{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-md)}
.grow-head svg,.key-pic svg,.key-arrow{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.grow-head svg{color:var(--ink)}
.grow-head strong{font-weight:600}
.grow-lines{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-2)}
.grow-lines li{font-size:var(--t-sm);line-height:1.45;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--sunk)}
.grow-lines .grow-new{background:var(--brand-soft);color:var(--brand-on-soft)}
.grow-new span{display:block;font-size:var(--t-xs);margin-top:2px}
.grow-foot{margin-top:var(--s-4);font-size:var(--t-xs);color:var(--soft)}

/* Decisions made your way: one question, what you said before, a suggestion. */
.decide-demo,.team-demo{margin:0;min-width:0}
.decide-card{background:var(--card);border-radius:var(--r-lg);padding:var(--s-5);display:grid;gap:var(--s-4)}
.decide-card .bubble.agent{margin-top:0;max-width:calc(100% - 48px)}
.decide-past{background:var(--brand-soft);color:var(--brand-on-soft);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4)}
.decide-label{font-size:var(--t-xs);font-weight:600}
.decide-quote{font-size:var(--t-sm);line-height:1.45;margin-top:var(--s-1)}
.decide-quote span{display:block;font-size:var(--t-xs);margin-top:2px}
.decide-suggest{font-size:var(--t-sm);line-height:1.45}
.decide-suggest strong{font-weight:600}
.decide-answers{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.decide-answers span{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--sunk);color:var(--soft);font-size:var(--t-xs);font-weight:500}

/* Keys that stay safe: the agent asks, Mainmind adds the key, the account answers. */
.key-flow{margin:0;display:flex;align-items:flex-start;justify-content:center;gap:var(--s-2)}
.key-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-1);min-width:0;flex:1 1 0;font-size:var(--t-xs);color:var(--soft)}
.key-step strong{font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-top:var(--s-1)}
.key-pic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--card);color:var(--ink)}
.key-vault .key-pic{background:var(--brand);color:var(--brand-ink)}
.key-arrow{margin-top:20px;color:var(--faint)}
.closing{text-align:center;padding-block:var(--s-8)}
.closing>a{margin-top:var(--s-5)}
.footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);padding-block:var(--s-5);border-top:1px solid var(--edge)}
.footer .brand{font-size:var(--t-md)}
.footer .glyph{width:22px;height:22px}
.footer nav{margin-left:auto;gap:0 var(--s-5);font-size:var(--t-xs)}
.footer nav a{color:var(--soft)}

@media(max-width:1100px){.step-tiles.pillar-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pillar-tiles li:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:900px){.feature{grid-template-columns:1fr;padding:var(--s-6)}.travel-demo,.grow-demo,.decide-demo,.team-demo{width:min(100%,520px);margin-inline:auto}.step-tiles,.step-tiles.pillar-tiles{grid-template-columns:1fr}}
@media(max-width:560px){
  .measure{width:calc(100% - 2 * var(--s-4))}
  .wide-link{display:none!important}
  .site-header{min-height:60px}
  .hero{padding-block:var(--s-7) var(--s-6)}
  .hero>p{font-size:var(--t-md)}
  .feature{padding:var(--s-5) var(--s-4);border-radius:var(--r);gap:var(--s-5)}
  .pillars{padding-block:0 var(--s-7)}
  .travel-chat{padding:var(--s-4) var(--s-4) 0}
  .travel-status{margin-inline:calc(-1 * var(--s-4))}
  .bubble.agent{margin-left:44px}
  .bubble.agent::before{left:-44px;width:36px;height:36px}
  .app-choices button{flex-direction:column;gap:var(--s-1);min-height:60px;border-radius:var(--r)}
  .app-choices{border-radius:var(--r)}
  .steps{padding-top:var(--s-7)}
  .step-tiles li,.pillar-tiles a{display:grid;grid-template-columns:28px 1fr;column-gap:var(--s-3);padding:var(--s-4)}
  .pillar-tiles a{grid-template-columns:44px 1fr}
  .step-tiles.pillar-tiles li{display:block;padding:0}
  .pillar-tiles a{padding:var(--s-4)}
  .step-tiles h3{margin:0;align-self:center}
  .step-tiles p{grid-column:2;margin-top:var(--s-1)}
  .closing{padding-block:var(--s-7)}
  .footer nav{margin-left:0}
}
/* The hero scene: a note hops from pal to pal across three apps, once. Its
   resting state is the end of the story, so reduced motion shows the note
   delivered. The dotted trails stay still: Chromium stopped painting a
   trail whose fade-in had ended. */
.hero-scene{margin:var(--s-6) auto 0;max-width:min(100%,620px)}
.hero-scene svg{display:block;width:100%;height:auto;overflow:visible}
.hero-scene text{font-family:var(--ui);font-weight:600;fill:var(--ink)}
.isle-sky{fill:var(--sky-soft)}.isle-mint{fill:var(--mint-soft)}.isle-grape{fill:var(--grape-soft)}
.hero-scene .arc{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 8;opacity:.55}
.hero-scene .note{transform:translate(240px,0)}
.hero-scene .note rect{fill:var(--brand)}
.hero-scene .note path{fill:none;stroke:var(--brand-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-scene .pal{transform-box:fill-box;transform-origin:50% 100%}
.hero-scene.play .note{animation:note-hop 2s linear .7s both}
.hero-scene.play .pal-1{animation:pal-toss .24s var(--bounce) .5s both}
.hero-scene.play .pal-2{animation:pal-catch .24s var(--bounce) 1.5s both}
.hero-scene.play .pal-3{animation:pal-catch .24s var(--bounce) 2.7s both}
@keyframes note-hop{0%{transform:translate(0px,-0.0px)}5%{transform:translate(15px,-11.8px)}10%{transform:translate(30px,-20.2px)}15%{transform:translate(45px,-25.3px)}20%{transform:translate(60px,-27.0px)}25%{transform:translate(75px,-25.3px)}30%{transform:translate(90px,-20.2px)}35%{transform:translate(105px,-11.8px)}40%{transform:translate(120px,-0.0px)}60%{transform:translate(120px,0)}65%{transform:translate(135px,-11.8px)}70%{transform:translate(150px,-20.2px)}75%{transform:translate(165px,-25.3px)}80%{transform:translate(180px,-27.0px)}85%{transform:translate(195px,-25.3px)}90%{transform:translate(210px,-20.2px)}95%{transform:translate(225px,-11.8px)}100%{transform:translate(240px,-0.0px)}}
@keyframes pal-toss{40%{transform:translateY(-10px) rotate(-6deg)}}
@keyframes pal-catch{35%{transform:scale(1.12,.84)}70%{transform:scale(.95,1.06)}}
/* Colour on the tiles, one flavour each. */
.pillar-tiles svg{box-sizing:content-box;padding:8px;border-radius:14px;background:var(--sky-soft)}
.pillar-tiles li:nth-child(2) svg{background:var(--grape-soft)}
.pillar-tiles li:nth-child(3) svg{background:var(--mint-soft)}
.pillar-tiles li:nth-child(4) svg{background:var(--sunny-soft)}
.pillar-tiles li:nth-child(5) svg{background:var(--tangerine-soft)}
/* Each illustration pops in once as it scrolls into view. */
.js .feature figure{opacity:0;transform:translateY(24px) scale(.96)}
.js .feature figure.seen{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .24s var(--bounce)}
@media print{.js .feature figure{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .feature figure{opacity:1!important;transform:none!important}*,*::before,*::after{animation:none!important;transition:none!important}}