/* ==========================================================================
   OperAIgent v034-Claude: polish layer (loaded last)
   Brighter neutral sand, dark grey ink, blue only for "AI" in the wordmark
   and for things you can click. Depth comes from three elevation steps,
   edge light, overlap, a layered hero stage and fine grain.
   Delete this file and its <link> to return to the base styling.
   ========================================================================== */

:root{
  /* Ground and surfaces: light, low-saturation sand */
  --paper:#f7f5f1;
  --band:#f2efe9;
  --surface:#fdfcfa;
  --white:#ffffff;
  --well:#f3f0ea;

  /* Ink: dark neutral grey, never navy */
  --ink:#24272c;
  --muted:#4f545c;
  --faint:#80858d;
  --edge:#e6e1d8;
  --hairline:rgb(36 39 44 / 8%);
  --sage:#8a8f97;                 /* icons and bullets (legacy token name) */

  /* The one accent: interactive things and the "AI" in the wordmark */
  --accent:#2457a4;
  --accent-hover:#1c4888;
  --accent-soft:rgb(36 87 164 / 10%);

  /* Elevation: warm-tinted, offset, soft. Three steps only. */
  --shadow-tint:52 44 32;
  --e1:0 1px 2px rgb(var(--shadow-tint) / 6%),0 2px 6px -2px rgb(var(--shadow-tint) / 8%);
  --e2:0 1px 2px rgb(var(--shadow-tint) / 5%),0 8px 20px -8px rgb(var(--shadow-tint) / 14%),0 2px 6px -2px rgb(var(--shadow-tint) / 6%);
  --e3:0 2px 4px rgb(var(--shadow-tint) / 5%),0 24px 48px -16px rgb(var(--shadow-tint) / 22%),0 10px 20px -10px rgb(var(--shadow-tint) / 10%);
  --edge-light:inset 0 1px 0 rgb(255 255 255 / 90%);

  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --sc-ease-out:var(--ease-out);
}

/* ------------------------------------------------------------ base ------ */
body{background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;font-feature-settings:"kern","liga"}
h1,h2,h3{color:var(--ink)}
::selection{background:var(--accent);color:#fff}
html{accent-color:var(--accent);caret-color:var(--accent);scrollbar-color:#cfc9be transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.accent,.blue{color:inherit}
.brand .accent{color:var(--accent)}
.skip{background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--radius-s);box-shadow:var(--e2)}

/* Fine grain: keeps large light fields from looking like flat vector */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;mix-blend-mode:multiply}
.grain::before{content:"";position:absolute;inset:-50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ------------------------------------------------------------ header ---- */
/* At the top the header sits on the page. On scroll it lifts into a floating,
   frosted bar with edge light and a soft shadow. */
.header-shell{padding-top:calc(10px * var(--header-progress))}
.header{height:calc(88px - 36px * var(--header-progress))}
.header:before{
  left:calc((var(--gutter) - 22px) * var(--header-progress));right:calc((var(--gutter) - 22px) * var(--header-progress));width:auto;transform:none;
  border-radius:calc(18px * var(--header-progress));
  background:rgb(253 252 250 / calc(.6 + .37 * var(--header-progress)));
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgb(255 255 255 / calc(.85 * var(--header-progress)));
  border-bottom-color:rgb(36 39 44 / calc(.08 - .04 * var(--header-progress)));
  box-shadow:0 1px 0 rgb(255 255 255 / 70%) inset,0 calc(14px * var(--header-progress)) calc(32px * var(--header-progress)) calc(-14px * var(--header-progress)) rgb(var(--shadow-tint) / 22%),0 1px 2px rgb(var(--shadow-tint) / calc(.06 * var(--header-progress)));
}
.brand{color:var(--ink)}
.brand-gear img{border-radius:23%;box-shadow:0 1px 2px rgb(var(--shadow-tint) / 18%)}
.header .brand-gear{transform:scale(calc(1 - .3 * var(--header-progress)));mask-image:none;-webkit-mask-image:none}
.desktop-nav a{color:var(--ink);position:relative;transition:color 160ms ease}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.desktop-nav a:hover{color:var(--accent)}.desktop-nav a:hover::after{transform:scaleX(1)}}

/* ------------------------------------------------------------ buttons --- */
.button{
  border:0;border-radius:var(--radius-s);background:var(--accent);color:#fff;font-weight:600;letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 18%),inset 0 -1px 0 rgb(0 0 0 / 12%),0 1px 2px rgb(20 50 100 / 22%),0 6px 14px -6px rgb(36 87 164 / 50%);
  transition:background-color 180ms ease,transform 160ms var(--ease-out),box-shadow 220ms ease;
}
.button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgb(255 255 255 / 18%),inset 0 -1px 0 rgb(0 0 0 / 12%),0 2px 4px rgb(20 50 100 / 20%),0 12px 24px -10px rgb(36 87 164 / 60%)}
  .button:hover:active{transform:scale(.97)}
}
.text-link,.email-address,.footer-legal a,.policy-page a{color:var(--accent);text-decoration-color:rgb(36 87 164 / 35%);transition:text-decoration-color 160ms ease,color 160ms ease}
.text-link:hover,.email-address:hover,.footer-legal a:hover{color:var(--accent-hover);text-decoration-color:currentColor}
.text-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.text-link::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform 220ms var(--ease-out)}
.text-link:hover::after{transform:rotate(45deg) translate(1px,1px)}
.copy-email{color:var(--muted);text-decoration-color:rgb(36 39 44 / 25%);transition:color 160ms ease}
.copy-email:hover{color:var(--accent)}

/* ------------------------------------------------------------ type ------ */
h1{font-weight:600;letter-spacing:-.038em;line-height:1.02}
.lead{color:var(--muted);font-size:clamp(18px,1.45vw,21px);line-height:1.55}
.section-title{font-size:clamp(28px,2.4vw,36px);font-weight:600;letter-spacing:-.022em;line-height:1.1;text-transform:none;margin-bottom:28px}
.row-label,.featured .row-label{color:var(--ink);letter-spacing:-.018em}
.row-content h3{color:var(--ink);font-weight:500;letter-spacing:-.012em}
.row-content p,.process-step p,.contact-panel p{color:var(--muted);line-height:1.6}
.row-content li{font-size:16px;color:var(--muted)}
.row-content li:before{width:5px;height:5px;background:var(--faint)}
.footer-legal,footer p{color:var(--muted)}

/* ------------------------------------------------------------ sections -- */
.section-band{border-top:0}
.band-tint,.scroll-story .section-band{background:none}

/* How it works: each step is a raised plate */
.process-step{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-m);padding:24px 26px 26px;box-shadow:var(--edge-light),var(--e1);transition:box-shadow 260ms ease,transform 260ms var(--ease-out)}
.process-step svg{box-sizing:content-box;width:24px;height:24px;padding:10px;border-radius:12px;background:var(--well);stroke:var(--ink);stroke-width:1.5;box-shadow:inset 0 1px 1px rgb(var(--shadow-tint) / 10%),0 1px 0 rgb(255 255 255 / 90%)}
.process-step h3{font-size:22px;letter-spacing:-.015em}
.process-step:after{display:none}
@media (hover:hover) and (pointer:fine){.process-step:hover{box-shadow:var(--edge-light),var(--e2);transform:translateY(-2px)}}

/* Capabilities: the two chapter beats are feature plates; the rest share one panel */
.capability-row,.audience-row{border-top:0}
.capability-row:last-child,.audience-row:last-child{border-bottom:0}
.audiences-list{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-l);box-shadow:var(--edge-light),var(--e1);padding:4px 36px}
.audiences-list .audience-row+.audience-row{border-top:1px solid var(--edge)}
.audiences-list .disclosure{padding-block:30px}

/* Contact: the most elevated surface on the page */
.contact-panel{background:var(--surface);border:1px solid var(--hairline);border-radius:28px;padding:clamp(32px,4vw,56px);box-shadow:var(--edge-light),var(--e3);align-items:center}
.contact-panel h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.028em}
.email-contact{padding:8px 0 8px clamp(28px,3vw,48px);border-left:1px solid var(--edge)}
#contact .section-inner{padding-bottom:96px}
footer.wrap{border-top:1px solid var(--edge)}

/* ------------------------------------------------------------ scroll-craft reveals */
.js [data-sc-in],.js [data-sc-stagger]>*{opacity:0;transform:translate3d(0,18px,0);transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out)}
.js [data-sc-in].sc-in,.js [data-sc-stagger]>.sc-in{opacity:1;transform:none}
[data-sc-stagger].sc-in{transform:none}
[data-sc-tilt]{transform-style:preserve-3d;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js [data-sc-in],.js [data-sc-stagger]>*{transform:none;transition-duration:200ms}
}

/* ------------------------------------------------------------ desktop story */
@media (min-width:1024px){
  .scroll-story>.hero-figure{max-width:680px}
  .scroll-story .process-strip{gap:14px}
  .scroll-story .process-step{grid-template-columns:44px 1fr;column-gap:20px}
  .scroll-story .process-step svg{margin-top:0}
  .scroll-story .audience-row .disclosure{padding-block:30px}
}

/* ------------------------------------------------------------ tablet ---- */
@media (min-width:741px) and (max-width:1023px){
  .process-strip{gap:14px}
}

/* ------------------------------------------------------------ phone ----- */
@media (max-width:740px){
  body{font-size:16px}
  .header-shell{padding-top:calc(8px * var(--header-progress))}
  .header{height:calc(64px - 8px * var(--header-progress))}
  .header:before{left:calc((var(--gutter) - 12px) * var(--header-progress));right:calc((var(--gutter) - 12px) * var(--header-progress));border-radius:calc(16px * var(--header-progress))}
  .mobile-menu nav{left:10px;right:10px;top:calc(100% + 8px);border:1px solid rgb(255 255 255 / 90%);border-radius:var(--radius-m);background:rgb(253 252 250 / 90%);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--edge-light),var(--e3);padding:10px 20px 14px}
  .mobile-menu nav a+a{border-top:1px solid var(--edge)}
  .mobile-menu>summary span{background:var(--ink)}
  .process-step{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:20px}
  .process-step h3{font-size:20px}
  .audiences-list{border-radius:var(--radius-m);padding:0 20px}
  .disclosure>summary{padding:20px 0}
  .audiences-list .disclosure{padding-block:0}
  .chevron{border-color:var(--faint)}
  .contact-panel{border-radius:22px;padding:28px 22px}
  .email-contact{padding:24px 0 0;border-left:0;border-top:1px solid var(--edge)}
}

/* ==========================================================================
   Storyboard hero (assets/storyboard): square stage, cards that line up
   ========================================================================== */
.hero-stage{aspect-ratio:1/1;width:100%;max-width:100%;margin-inline:auto;position:relative}
.hero-stage .sb-stage{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
/* Feathered edges: the outer 2.5% of the picture fades into the page, so its edge can never read as a box.
   (Content stays at least 2.7% in from every edge, so nothing in the picture is faded.) */
.hero-clip,.hero-cap-video{--feather:2.5%;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);mask-composite:intersect}
.hero-clip.is-on{opacity:1}
.hero-cap-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 300ms ease;pointer-events:none}
.has-cap-clip .hero-cap-video{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .hero-copy>*{opacity:0;transform:translateY(16px);animation:rise 800ms var(--ease-out) forwards}
  .js .hero-copy>*:nth-child(2){animation-delay:90ms}
  .js .hero-copy>*:nth-child(3){animation-delay:180ms}
  .js .hero-figure{opacity:0;animation:stage-in 1000ms var(--ease-out) 150ms forwards}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes stage-in{to{opacity:1}}

/* Leader line from the active card to its part of the picture */
.sb-leader{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:15;opacity:0;transition:opacity 220ms ease}
.sb-leader.is-on{opacity:1}
.sb-leader path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 5;opacity:.7}
.sb-leader circle{fill:var(--accent)}
.sb-leader .b{fill:var(--surface);stroke:var(--accent);stroke-width:2}

/* Capabilities: six compact cards */
.capability-grid{display:grid;gap:12px}
.capability-row .disclosure{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-m);box-shadow:var(--edge-light),var(--e1);transition:box-shadow 260ms ease,transform 260ms var(--ease-out),border-color 200ms ease}
.capability-row[data-cap]{--cap:var(--accent)}
.capability-row[data-cap="anomaly"]{--cap:#c2452d}
.capability-row .row-label::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cap);margin-right:10px;vertical-align:.12em;opacity:.35;transition:opacity 200ms ease,box-shadow 200ms ease}
.capability-row.is-active .disclosure{border-color:color-mix(in srgb,var(--cap) 45%,transparent);box-shadow:var(--edge-light),var(--e2),0 0 0 3px color-mix(in srgb,var(--cap) 12%,transparent)}
.capability-row.is-active .row-label::before{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--cap) 16%,transparent)}

@media (min-width:1024px){
  .scroll-story{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
  .scroll-story .hero-stage{aspect-ratio:1/1;width:min(100%,calc(100svh - 110px));max-height:none}
  .scroll-story>.hero-figure{max-width:none;justify-content:center}

  /* How it works and Capabilities: one screen each; the cards cycle with the picture */
  .scroll-story #how,.scroll-story #capabilities{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 88px)}
  .scroll-story #how .section-inner,.scroll-story #capabilities .section-inner{padding-block:24px}
  .scroll-story .process-strip{gap:14px;padding:0}
  .scroll-story .process-step{max-width:500px;padding:18px 20px 20px;opacity:.55;transform:scale(.97);transform-origin:left center;transition:opacity var(--how-step,400ms) cubic-bezier(.65,0,.35,1),transform var(--how-step,400ms) cubic-bezier(.65,0,.35,1),box-shadow var(--how-step,400ms) cubic-bezier(.65,0,.35,1);cursor:default}
  .scroll-story .process-step.is-active{opacity:1;transform:scale(1.02)}
  .scroll-story .process-step.is-active{box-shadow:var(--edge-light),var(--e2)}
  .scroll-story .process-step.is-active svg{stroke:var(--accent);background:var(--accent-soft)}
  .scroll-story .process-step h3{font-size:20px}
  .scroll-story .process-step p{font-size:16px}

  /* Capabilities: six compact cards; the highlight cycles through them (hover picks one) */
  .scroll-story #capabilities .section-title{margin-bottom:16px}
  .capability-grid{grid-template-columns:minmax(0,1fr);gap:8px;max-width:540px}
  .capability-row .disclosure{display:block;padding:13px 18px 14px}
  .capability-row .disclosure>summary{padding:0}
  .scroll-story .capability-row .row-label{font-size:17px;max-width:none;letter-spacing:-.01em}
  .scroll-story .capability-row .row-content h3{font-size:14.5px;font-weight:500;margin-top:3px;color:var(--muted);padding-left:19px}
  /* Cards keep a fixed height: the active card is marked by its border, glow and dot, not by expanding (no layout shift). */
  .scroll-story .capability-row .row-content ul{display:none}
  .capability-row{cursor:default}
  /* Owner review v3: cards start collapsed (label + heading) and open on hover or keyboard focus;
     a +/- button on the right shows they can expand. */
  .scroll-story .capability-row .disclosure{position:relative;padding-right:52px}
  .scroll-story .capability-row .row-content p{display:block;font-size:14.5px;line-height:1.5;padding-left:19px;margin-top:0;max-height:0;opacity:0;overflow:hidden;
    transition:max-height 280ms cubic-bezier(.22,1,.36,1),opacity 200ms ease,margin-top 280ms cubic-bezier(.22,1,.36,1)}
  .scroll-story .capability-row:hover .row-content p,.scroll-story .capability-row:focus-within .row-content p{max-height:9em;opacity:1;margin-top:8px}
  .scroll-story .capability-row .chevron{display:block;position:absolute;right:16px;top:14px;width:24px;height:24px;border-radius:50%;border:1px solid var(--hairline);background:var(--surface);pointer-events:none;transition:background-color 160ms ease,border-color 160ms ease}
  .scroll-story .capability-row .chevron::before,.scroll-story .capability-row .chevron::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--muted);border-radius:1px;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
  .scroll-story .capability-row .chevron::after{transform:rotate(90deg)}
  .scroll-story .capability-row:hover .chevron::after,.scroll-story .capability-row:focus-within .chevron::after{transform:rotate(0deg)}
  .scroll-story .capability-row:hover .chevron{border-color:color-mix(in srgb,var(--cap) 40%,transparent)}
}
@media (max-width:1023px){
  .capability-row .disclosure{padding:0 20px}
}
/* Short laptop screens: keep all three How it works cards in view */
@media (min-width:1024px) and (max-height:780px){
  .scroll-story .process-strip{gap:10px}
  .scroll-story .process-step{padding:14px 18px 15px}
  .scroll-story .process-step p{font-size:15px;line-height:1.5}
}
/* Owner review v3: collapsible Safety and compliance panel at the end of Who it's for (closed by default) */
.safety-note{margin-top:24px;max-width:640px;border:1px solid var(--hairline);border-radius:var(--radius-m);background:var(--surface)}
.safety-note>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.safety-note>summary::-webkit-details-marker{display:none}
.safety-note h3{font-size:16px;font-weight:500;margin:0}
.safety-toggle{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--hairline)}
.safety-toggle::before,.safety-toggle::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--muted);border-radius:1px;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.safety-toggle::after{transform:rotate(90deg)}
.safety-note[open] .safety-toggle::after{transform:rotate(0deg)}
.safety-body{padding:0 18px 16px}
.safety-body p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;max-width:62ch}
.safety-body p+p{margin-top:8px}
.footer-note{font-size:12px;line-height:1.5;color:var(--muted);max-width:60ch;margin-top:6px}
/* 2026-11-03: headline "AI" in the accent blue (same as the Contact button); trademark mark after the logo wordmark */
h1 .accent{color:var(--accent)}
.brand .tm{font-size:.42em;font-weight:500;vertical-align:super;margin-left:1px;letter-spacing:0;color:inherit}