/* Mono's visual system applied to Archivo's original landing-page content. */
:root{--ink:#202124;--muted:#70747c;--paper:#ffffff;--accent:#647a5b;--accent-hover:#4f6247;--accent-soft:#eff4ec;--accent-line:#cfdcc8;--lavender:#f2f6f0;--mint:#f2f6f0;--peach:#f2f6f0;--stroke:#e1e4e9;--radius-lg:12px;--radius-md:8px;--shell:min(1200px,calc(100% - 112px))}
html{scroll-padding-top:100px}body{font-family:'DM Sans',Arial,sans-serif}em{font-style:normal;color:var(--accent)!important}a,button{-webkit-tap-highlight-color:transparent}.site-header{padding:29px 0;background:#fffffff2;border:0}.site-header.scrolled{background:#fffffff2;box-shadow:none}.nav{min-height:53px;border-bottom:1px solid var(--stroke);padding-bottom:25px}.brand-lockup{font-family:inherit;gap:5px}.brand{font-size:23px;font-weight:650;letter-spacing:-1px}.brand-office,.footer .brand-office{color:var(--ink);-webkit-text-fill-color:currentColor;background:none;font-weight:450;letter-spacing:-1px}.brand-img{object-fit:contain}.nav-menu{gap:34px}.nav-links,.nav-actions{gap:23px}.nav-links a,.text-link{font-size:14px;color:#62666e}.button{border-radius:8px;font-weight:550;min-height:53px;padding:0 25px;gap:10px}.button-dark{background:var(--accent)!important;color:#fff;box-shadow:none}.button-dark:hover{background:var(--accent-hover)!important;box-shadow:none}.button-small{min-height:42px;font-size:14px;padding:0 18px}.button-quiet{padding-left:12px;font-size:14px}.hero{grid-template-columns:1fr 1fr;gap:65px;min-height:0;padding:48px 0 78px}.hero-copy{min-width:0}.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.8px;color:#565c68}.eyebrow>span{display:none}h1,.section-heading,.cta-card h2{font-family:inherit;font-weight:500;letter-spacing:-.055em}.hero h1{font-size:clamp(60px,5.9vw,82px);line-height:1.05;max-width:none;margin:25px 0}.intro-heading-rotator{min-width:0;display:block;min-height:2.1em;color:var(--accent)!important}.hero-text{font-size:17px;line-height:1.8;max-width:43ch;color:var(--muted)}.hero-actions{gap:5px}.hero-note{margin-top:27px;gap:12px}.hero-note p{font-size:12px;line-height:1.7;color:var(--muted)}.hero-note strong{font-weight:550;color:#343942}.avatar{background:var(--accent-soft)!important;color:var(--accent);border-color:var(--paper);font-weight:550}.mono-stage{background:#f2f6f0;padding:26px 29px 22px;min-width:0;border-radius:3px}.stage-label{display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:#757d8d;margin-bottom:27px}.workspace-card{background:white;border:1px solid #e0e4ec;border-radius:12px;transform:rotate(-2deg);box-shadow:0 25px 50px -28px #43547455;overflow:hidden}.workspace-bar{display:flex;align-items:center;gap:9px;padding:20px 23px;border-bottom:1px solid #edf0f4;font-size:14px;font-weight:550}.workspace-body{padding:26px 23px}.workspace-body .mini-label{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:#89909b;margin:0 0 12px}.workspace-body h2{font-size:27px;font-weight:500;letter-spacing:-1px;margin:0 0 7px}.sync-caption{font-size:12px;color:#8b929f;margin:0}.workspace-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0}.workspace-app{display:flex;flex-direction:column;align-items:flex-start;gap:14px;border:1px solid #e7ebf1;background:#ffffff;padding:15px 12px;border-radius:7px;font-size:12px;color:#535d6f;transition:background .18s,border-color .18s,transform .18s}.workspace-app img{object-fit:contain}.workspace-app:hover{background:var(--accent-soft);border-color:var(--accent-line);transform:translateY(-2px)}.workspace-pilot{display:flex;gap:12px;align-items:center;padding:16px 13px;background:var(--accent-soft);border-radius:7px}.workspace-pilot img{object-fit:contain}.workspace-pilot strong{display:block;font-size:12px;font-weight:550;color:var(--accent-hover)}.workspace-pilot span{display:block;font-size:11px;color:#7d8f74;margin-top:5px}.workspace-bottom{display:flex;justify-content:space-between;padding:14px 23px;border-top:1px solid #edf0f4;color:#939aaa;font-size:10px;letter-spacing:.4px}.stage-footer{font-size:11px;color:#7d8697;margin-top:25px}.app-strip{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:28px 0 32px}.app-strip>p{font-size:11px;letter-spacing:1.5px;color:#9398a1;margin-bottom:23px}.app-row span{font-family:inherit;font-size:15px;font-weight:450;color:#727780}.section{padding:80px 0}.section-kicker{font-size:11px;letter-spacing:1.3px;margin-bottom:27px;font-weight:550}.section-kicker span{border-radius:0;background:transparent!important;color:var(--accent)!important;width:auto;height:auto;font-size:12px;margin-right:5px}.intro-grid,.how-heading{grid-template-columns:1fr 1fr;gap:65px}.section-heading{font-size:46px;line-height:1.12}.section-copy{font-size:16px;line-height:1.8;max-width:none}.bento-grid{gap:24px;grid-template-columns:1fr 1fr;margin-top:43px}.bento-card{background:#f4f7f2!important;border:1px solid #e3e9df;border-radius:10px;min-height:0}.bento-large{grid-template-columns:.85fr 1.15fr;min-height:340px}.bento-copy{padding:35px}.bento-copy h3{font-family:inherit;font-size:27px;letter-spacing:-.8px;font-weight:500;line-height:1.25}.bento-copy p{font-size:15px;line-height:1.8;color:var(--muted);max-width:none}.bento-copy a{font-size:14px;font-weight:550;color:var(--accent)}.number{border:0;width:auto;height:auto;display:block;font-size:12px;color:var(--accent);font-weight:500;margin-bottom:23px}.invoice-shot{height:270px;max-width:100%;width:100%;margin:0 -20px -20px 0;background-size:1080px auto;transform:rotate(-2deg);border:1px solid #dce2ec;border-radius:8px}.bento-card.bento-pilot{padding:32px;flex-direction:column;align-items:stretch;overflow:hidden;gap:25px}.bento-card.bento-pilot .bento-copy{flex:0}.bento-small .number{margin-bottom:23px}.pilot-embed{width:100%;max-width:340px;align-self:center;border:1px solid #e0e5ec;border-radius:8px;box-shadow:none}.pilot-embed:hover{transform:none;box-shadow:none}.bento-peach{flex-direction:column-reverse;justify-content:flex-end}.bento-small.bento-peach .bento-copy{padding:32px 32px 0}.line-illustration{padding:20px 20px 26px;margin:0;min-height:0;flex:0;max-height:420px}.collab-shot{animation:none;height:auto;max-height:370px}.bento-peach:hover .line-illustration{transform:none}.how-section{background:#ffffff;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);--how-w:var(--shell)}.how-heading{align-items:end}.showcase-scroll{margin-top:44px}.showcase{grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}.showcase-stage{height:570px;min-height:0;border-radius:10px;background:#f2f6f0}.showcase-panel{inset:12px}.preview-window{border-radius:7px;box-shadow:none;border:1px solid #dfe6da}.sc-item{padding:18px 0}.sc-title{font-family:inherit;font-size:21px;letter-spacing:-.5px;font-weight:500;color:#9198a4;gap:0}.sc-dot{display:none}.sc-item:before{background:var(--accent)}.sc-item.is-active .sc-title{color:var(--accent)}.sc-desc{font-size:14px;line-height:1.7}.sc-item.is-active .sc-desc{max-height:220px}.preview-pilot{border-radius:12px;box-shadow:0 12px 30px #28345224}.cta-section{padding:75px 0}.cta-card{background:transparent!important;border-radius:0;padding:25px 0}.cta-card h2{font-size:66px;line-height:1.07;margin:26px 0}.cta-card>p{font-size:16px}.cta-card>small{font-size:12px;color:#9297a2}.footer{background:#ffffff;color:var(--ink);padding:50px 0 28px;border-top:1px solid var(--stroke)}.footer-grid{grid-template-columns:1.3fr .7fr .7fr .7fr 1.1fr;gap:30px}.footer .brand{font-size:20px}.footer-downloads{flex-direction:column;align-items:flex-start;gap:9px;margin-top:22px}.footer-dl-btn{background:transparent;color:#717985;border:1px solid #e1e5ec;font-size:12px;padding:10px 12px;border-radius:6px}.footer-dl-btn:hover{background:#f2f6f0;color:var(--accent)}.footer-column strong,.footer-newsletter>strong{font-size:14px;font-weight:550}.footer-column a{font-size:14px;color:#777e89}.footer-column a:hover{color:var(--accent)}.newsletter-link{margin-top:20px;min-height:42px;font-size:14px}.footer-newsletter small{font-size:12px;color:#8c929b;line-height:1.6}.footer-bottom{border-top:1px solid var(--stroke);color:#9298a2;margin-top:45px}.reveal{opacity:1!important;transform:none!important}.preview-pilot-fab{filter:none}
@media(max-width:1100px){:root{--shell:calc(100% - 64px)}.nav-menu{gap:24px}.nav-links,.nav-actions{gap:16px}.nav-links a,.text-link{font-size:13px}.nav-actions .button{font-size:12px;padding:0 12px}.hero{gap:35px}.hero h1{font-size:64px}.mono-stage{padding:22px 20px}.workspace-body{padding:24px 18px}.workspace-apps{gap:7px}.workspace-app{padding:13px 9px;font-size:11px}.hero-actions{flex-wrap:wrap}.intro-grid,.how-heading{gap:35px}.section-heading{font-size:40px}.footer-grid{grid-template-columns:1.2fr repeat(3,1fr)}.footer-newsletter{grid-column:1/-1}.showcase{grid-template-columns:230px minmax(0,1fr);gap:26px}}
@media(max-width:820px){:root{--shell:calc(100% - 40px)}.site-header{padding:18px 0 0}.nav{padding-bottom:18px;min-height:48px}.nav-menu{border-radius:9px;top:8px}.nav-links a,.text-link{font-size:16px}.hero{grid-template-columns:1fr;padding:45px 0 50px;gap:38px}.hero h1{font-size:clamp(54px,11vw,76px);max-width:640px}.intro-heading-rotator{min-height:2.1em}.hero-text{max-width:560px}.hero-actions{justify-content:flex-start}.hero-actions .button{flex:none}.mono-stage{max-width:520px;width:100%;justify-self:center;padding:27px}.workspace-app{font-size:13px;padding:16px 12px}.workspace-pilot strong{font-size:13px}.section{padding:55px 0}.intro-grid,.how-heading{grid-template-columns:1fr;gap:24px}.section-heading{font-size:38px}.section-copy{font-size:16px}.bento-grid{grid-template-columns:1fr;gap:22px;margin-top:33px}.bento-large{grid-template-columns:1fr;min-height:0}.bento-copy{padding:30px}.invoice-shot{height:275px;width:auto;max-width:none;justify-self:stretch;margin:0 -10px -20px 25px}.bento-card.bento-pilot{padding:30px}.bento-small{min-height:0}.bento-card.bento-pilot .pilot-embed{max-width:330px}.bento-small.bento-peach .bento-copy{padding:30px 30px 0}.app-strip{padding:27px 0}.app-row{gap:18px 24px}.app-row span{font-size:14px}.showcase{grid-template-columns:1fr;gap:25px}.showcase-explainer{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.sc-title{font-size:18px}.sc-item{padding:16px 0}.sc-desc{font-size:14px}.showcase-stage{height:420px;aspect-ratio:auto}.cta-card{padding:12px 0}.cta-card h2{font-size:54px}.footer-grid{grid-template-columns:repeat(3,1fr);gap:35px 22px}.footer-brand{grid-column:1/-1}.footer-downloads{flex-direction:row;flex-wrap:wrap}.footer-newsletter{margin-top:0}.footer-column a{font-size:13px}.footer-column strong{font-size:14px}.footer{padding-top:36px}.brand-office{animation:none!important}}
@media(max-width:380px){.mono-stage{padding:20px 16px}.workspace-app{font-size:11px;padding:13px 8px}.workspace-body{padding:22px 15px}.hero h1{font-size:52px}.hero-actions .button{padding:0 16px}.stage-label{font-size:9px}.footer-grid{grid-template-columns:1fr 1fr}.showcase-stage{height:340px}}
@media(prefers-reduced-motion:reduce){.intro-heading-rotator{transition:none!important}.workspace-card{transform:none}html{scroll-behavior:auto}}

/* ---- Archivo merge (2026-10-09) ------------------------------------------
   1. Section 2 stays SCROLL-PINNED. The Mono export flattened the pin to a
      plain list; here the pin is kept (home.css + home.js initShowcase), and
      only its spacing is retuned. The pin's top padding clears the taller Mono
      header, and the stage shrinks on short screens so it never hides under it.
      Mobile (<=820px) keeps the Mono sizes above; it and reduced-motion still
      unpin via home.css. */
@media(min-width:821px) and (prefers-reduced-motion:no-preference){.showcase-pin{padding:clamp(120px,15vh,150px) 0 32px}
.showcase-stage{height:min(570px,calc(100vh - 190px));min-height:380px}}
/* 2. The footer keeps the working double-opt-in newsletter form (home.js),
      drawn in Mono's light style instead of the old dark footer pill. */
.footer-newsletter form{margin-top:20px;background:#fff;border:1px solid var(--stroke);border-radius:8px}
.footer-newsletter input{color:var(--ink)}.footer-newsletter input::placeholder{color:#9aa0aa}
.footer-newsletter button{background:var(--accent);color:#fff;border-radius:6px;transition:background .18s}
.footer-newsletter button:hover{background:var(--accent-hover)}
.footer-newsletter input:focus-visible{outline:2px solid var(--accent)}

/* 3. Hero screenshots (index.html .hero-shots, slid by js/home.js
      initHeroShots). The panel spans the hero's text column in height: it
      starts level with the eyebrow and runs down through the hero's bottom
      padding to the divider line (.app-strip's top border). The negative
      margin-bottom must equal .hero's padding-bottom at each width.
      Sideways it runs past the page column to the window's right edge:
      --bleed is the gap between the column and that edge, so it must follow
      the --shell widths above. The scrollbar makes it a few px too wide;
      body overflow-x:clip hides that. Each screenshot fills the panel height
      and is cut on the right. To add a screenshot, add an <img
      class="hero-shot"> in index.html; nothing here changes. */
.hero-shots{--bleed:calc((100vw - min(1200px,100vw - 112px))/2);--gap:30px;position:relative;min-width:0;min-height:440px;align-self:stretch;margin-right:calc(var(--bleed)*-1);margin-bottom:-78px}
.hero-shots-frame{position:absolute;inset:0;overflow:hidden;background:var(--accent-soft);border-radius:20px 0 0 0;touch-action:pan-y;user-select:none}
.hero-shots-track{position:absolute;inset:var(--gap) 0 76px var(--gap);display:flex;gap:var(--gap);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.hero-shot{flex:0 0 100%;display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:left top;border-radius:12px 0 0 12px;background:#fff;box-shadow:0 0 0 1px rgba(32,40,28,.09),0 22px 50px -22px rgba(40,56,34,.38);-webkit-user-drag:none;pointer-events:none}
.hero-shots-bar{position:absolute;left:var(--gap);bottom:26px;display:flex;align-items:center;width:min(240px,calc(100% - var(--gap)*2))}
.hero-shots-slider{position:relative;flex:1;height:24px;cursor:pointer;touch-action:none;border-radius:4px}
.hero-shots-slider::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:var(--accent-line)}
.hero-shots-thumb{position:absolute;left:0;top:9px;height:6px;border-radius:3px;background:var(--accent);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.hero-shots-slider:hover .hero-shots-thumb,.hero-shots-slider.is-dragging .hero-shots-thumb{background:var(--accent-hover)}
.hero-shots-slider.is-dragging .hero-shots-thumb{transition:none}
.hero-shots-slider:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1100px){.hero-shots{--bleed:32px;--gap:22px;min-height:380px}.hero-shots-track{bottom:68px}.hero-shots-bar{bottom:22px}}
@media(max-width:820px){.hero-shots{--bleed:20px;--gap:16px;align-self:auto;height:clamp(320px,88vw,460px);min-height:0;margin-bottom:-50px}.hero-shots-frame{border-radius:14px 0 0 0}.hero-shots-track{bottom:60px}.hero-shot{border-radius:9px 0 0 9px}.hero-shots-bar{bottom:18px}}
@media(prefers-reduced-motion:reduce){.hero-shots-track,.hero-shots-thumb{transition:none}}

/* 4. Collaborate motion (index.html, card 03 of the #features bento). Four
      small copies of real Archivo screens, two by two, turned a little like a
      pile of cards. They sit on the card itself, with no frame around them.
      js/home.js (initCollabMotion) plays a loop on them: it lights one card at a
      time (data-act), types into fields, presses buttons, and arcs a green
      signal to the bell card. The HTML is the final frame, so with no script, or
      with reduced motion, the cards still read as a finished story. The state
      classes are: is-on (shown), is-done (answered), is-press (a button press). */
.collab-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:18px;margin:auto 0;padding:32px;font-size:12px;line-height:1.45;color:var(--ink);transition:opacity .45s ease}
.collab-collage.is-fading{opacity:0}
.cc-card{--r:0deg;--y:0px;position:relative;background:#fff;border:1px solid #e3e9df;border-radius:10px;padding:16px;box-shadow:0 14px 30px -20px rgba(40,56,34,.35);display:flex;flex-direction:column;gap:10px;min-width:0;transform:rotate(var(--r)) translateY(var(--y));transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,opacity .55s ease}
.cc-invite{--r:-1.2deg}.cc-bell{--r:1deg;--y:10px}.cc-markup{--r:.8deg}.cc-send{--r:-.9deg;--y:10px}
.collab-collage[data-act] .cc-card{opacity:.55}
.collab-collage[data-act=invite] .cc-invite,.collab-collage[data-act=bell] .cc-bell,.collab-collage[data-act=markup] .cc-markup,.collab-collage[data-act=send] .cc-send,.collab-collage .cc-card.is-ping{opacity:1;z-index:2;transform:rotate(var(--r)) translateY(calc(var(--y) - 6px)) scale(1.03);box-shadow:0 24px 44px -22px rgba(40,56,34,.5)}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:12px;color:#343942}
.cc-tabs{display:flex;gap:12px;font-size:11px;color:var(--muted);border-bottom:1px solid #eef1ec}
.cc-tabs>*{padding-bottom:6px}.cc-tabs b{font-weight:600;color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.cc-row{display:flex;gap:6px;min-width:0;align-items:center}
.cc-field,.cc-select{border:1px solid #e1e4e9;border-radius:6px;padding:5px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:27px;transition:border-color .25s,box-shadow .25s}
.cc-field{flex:1;min-width:0;color:#565c68}.cc-select{flex:none;color:#343942}.cc-select:after{content:"";display:inline-block;margin-left:6px;border:3.5px solid transparent;border-top-color:currentColor;vertical-align:-1px}
.cc-field.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cc-btn{align-self:flex-start;flex:none;background:var(--accent);color:#fff;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:550;transition:transform .14s ease,background .2s}
.cc-btn.is-press,.cc-mini.is-press{transform:scale(.9);background:var(--accent-hover)}
.cc-swap .cc-b1{display:none}.cc-swap.is-done .cc-b0{display:none}.cc-swap.is-done .cc-b1{display:inline}
.cc-btn.cc-swap.is-done{background:var(--accent-soft);color:var(--accent-hover)}
.cc-swap.is-done .cc-b1:before{content:"\2713";margin-right:5px}
/* Typing: the not-yet-typed part keeps its space in a clear colour, so the card never changes size. */
.cc-type .cc-r{color:transparent}
.cc-caret{display:inline-block;width:1px;height:1.15em;margin:0 -1px;background:var(--accent);vertical-align:-.2em;animation:cc-blink 1s steps(1) infinite}
.cc-caret[hidden]{display:none}
@keyframes cc-blink{50%{opacity:0}}
/* Bell */
.cc-bellic{position:relative;display:inline-grid;place-items:center;color:#565c68}
.cc-bellic.is-ring svg{animation:cc-ring .7s ease}
@keyframes cc-ring{20%{transform:rotate(16deg)}45%{transform:rotate(-12deg)}70%{transform:rotate(6deg)}}
.cc-badge{position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:var(--accent);color:#fff;font:600 9px/15px inherit;font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cc-badge.is-on{transform:scale(1)}
.cc-feed{display:flex;flex-direction:column;flex:none;height:132px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.cc-n{display:grid;grid-template-columns:20px 1fr;column-gap:8px;row-gap:5px;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease .1s,transform .5s cubic-bezier(.22,1,.36,1),padding .5s}
.cc-n.is-on{max-height:96px;opacity:1;transform:none;padding-bottom:9px}
.cc-n+.cc-n.is-on{border-top:1px solid #eef1ec;padding-top:9px}
.cc-n p{margin:0;font-size:11.5px;color:#565c68}.cc-n b{font-weight:600;color:#343942}
.cc-n-act{grid-column:2;display:flex;align-items:center;gap:5px;min-height:21px}
.cc-mini{background:var(--accent);color:#fff;border-radius:5px;padding:3px 9px;font-size:10.5px;font-weight:550;transition:transform .14s ease,background .2s}
.cc-mini-ghost{background:#fff;color:#565c68;box-shadow:inset 0 0 0 1px #e1e4e9}
.cc-n-done{display:none;font-style:normal;font-size:10.5px;font-weight:600;color:var(--accent-hover)}
.cc-n-done:before{content:"\2713";margin-right:4px}
.cc-n.is-done .cc-mini{display:none}.cc-n.is-done .cc-n-done{display:inline}
/* Markup */
.cc-cell{display:flex;align-items:center;gap:8px;border:1px solid #e9ece7;border-radius:6px;padding:6px 8px;font-size:11px;color:#565c68;background:#fbfcfa}
.cc-ref{font-size:10px;color:#9aa0a8}.cc-cell-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-val{position:relative;flex:none;font-weight:600;color:#343942;transition:color .3s}
.cc-val.is-new{color:var(--accent-hover)}
.cc-ink{position:absolute;left:-10px;top:-8px;width:calc(100% + 20px);height:calc(100% + 16px);overflow:visible;pointer-events:none}
.cc-ink path{fill:none;stroke:#d9534a;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease}
.cc-ink.is-on path{stroke-dashoffset:0}
.cc-note{display:flex;gap:8px;align-items:flex-start;transition:opacity .35s ease,transform .35s ease}
.cc-note p{margin:0;font-size:11.5px;color:#565c68}.cc-note b{font-weight:600;color:#343942}
.cc-markup .cc-note:not(.is-on){opacity:0;transform:translateY(4px)}
.cc-reply{padding-left:12px;border-left:2px solid #eef1ec;margin-left:9px}
.cc-av{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-hover);font-size:10px;font-weight:650;box-shadow:0 0 0 2px #fff}
.cc-av-b{background:#e9eef6;color:#4c5d7a}
.cc-at{color:var(--accent)!important;font-weight:600}
.cc-chip{font-size:10px;font-weight:600;color:var(--accent-hover);background:var(--accent-soft);border-radius:99px;padding:2px 8px;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.cc-chip.is-on{transform:scale(1)}
.cc-chip:before{content:"\2713";margin-right:4px}
/* Send file */
.cc-file{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:550;color:#343942}
.cc-fileic{flex:none;width:16px;height:19px;border-radius:3px;background:var(--accent);-webkit-mask:linear-gradient(225deg,transparent 4px,#000 4px);mask:linear-gradient(225deg,transparent 4px,#000 4px)}
.cc-receipt{display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:#70747c;margin-top:auto;transition:opacity .35s ease,transform .35s ease}
.cc-receipt:not(.is-on){opacity:0;transform:translateY(4px)}
.cc-status{align-self:flex-start;font-weight:600;border-radius:99px;padding:2px 8px;background:#f3f4f6;color:#565c68}
.cc-status.is-done{background:var(--accent-soft);color:var(--accent-hover)}
/* The signal: a dashed arc from a pressed button to the bell, with a dot riding it. */
.cc-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.cc-wire{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 4;stroke-linecap:round;opacity:0;transition:opacity .3s ease}
.cc-dot{fill:var(--accent);stroke:#fff;stroke-width:2;opacity:0;transition:opacity .2s ease}
.cc-wires.is-on .cc-wire{opacity:.6}.cc-wires.is-on .cc-dot{opacity:1}
@media(max-width:1100px){.collab-collage{padding:24px 24px 28px;gap:12px}.cc-card{padding:13px}}
@media(max-width:560px){.collab-collage{grid-template-columns:1fr;grid-auto-rows:auto;padding:22px 20px 26px}.cc-card{--r:0deg!important;--y:0px!important}}
@media(prefers-reduced-motion:reduce){.cc-caret{animation:none}}
/* 5. Build & automate (index.html #build, section 03). Six large tiles in two
      columns, split by thin lines instead of cards: a line above and below every
      row, and one upright line between the two halves of a row. .build-wide spans
      both columns and sets copy beside the media (.build-flip puts the media
      first). .build-media is a 16:10 well that holds a PLACEHOLDER (.build-ph)
      until the real picture, reel or motion is ready: replace the .build-ph span
      with the media and keep the well. */
.build-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:43px;border-top:1px solid #e6eae3}
.build-tile{display:flex;flex-direction:column;gap:28px;min-width:0;padding:52px 0;border-bottom:1px solid #e6eae3}
.build-wide+.build-tile{padding-right:48px}
.build-tile:not(.build-wide)+.build-tile:not(.build-wide){padding-left:48px;border-left:1px solid #e6eae3}
.build-wide{grid-column:1/-1;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:56px}
.build-flip{grid-template-columns:1.2fr .8fr}
.build-flip .build-copy{order:2}
.build-copy h3{margin:0 0 13px;font-size:27px;letter-spacing:-.8px;font-weight:500;line-height:1.25;color:var(--ink)}
.build-copy p{margin:0;max-width:520px;font-size:15px;line-height:1.8;color:var(--muted)}
.build-copy p b{font-weight:600;color:var(--accent)}
.build-media{position:relative;display:grid;place-items:center;aspect-ratio:16/10;margin-top:auto;border-radius:8px;background:#f6f8f5 repeating-linear-gradient(135deg,transparent 0 14px,#eef2ec 14px 15px)}
.build-wide .build-media{margin-top:0}
.build-ph{display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 40px);font-size:12px;color:var(--muted);text-align:left}
.build-ph i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.55}
@media(max-width:1100px){.build-tile{padding:40px 0}.build-wide+.build-tile{padding-right:32px}.build-tile:not(.build-wide)+.build-tile:not(.build-wide){padding-left:32px}.build-wide{gap:36px;grid-template-columns:1fr 1fr}}
@media(max-width:820px){.build-grid{grid-template-columns:1fr;margin-top:33px}.build-wide{grid-template-columns:1fr;gap:28px}.build-flip .build-copy{order:0}.build-tile,.build-wide+.build-tile,.build-tile:not(.build-wide)+.build-tile:not(.build-wide){padding:34px 0;border-left:0}.build-copy h3{font-size:24px}}
/* Build with Claude tile: the AppSwift screenshot fills the well, and the
   Claude Code chat window floats over its lower right corner, past the edge,
   with a deep shadow and a slow bob so it reads as a window on top. */
.build-shots{overflow:visible;background:none;margin-bottom:28px}
.build-shot-app{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:8px;box-shadow:0 0 0 1px #e3e9df,0 18px 40px -26px rgba(40,56,34,.35)}
.build-shot-float{position:absolute;right:-6%;bottom:-12%;width:50%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(30,40,30,.08),0 30px 60px -18px rgba(30,40,30,.45),0 10px 22px -12px rgba(30,40,30,.3);animation:build-float 6s ease-in-out infinite}
@keyframes build-float{50%{transform:translateY(-8px)}}
@media(max-width:820px){.build-shot-float{right:-3%;width:56%}}
@media(prefers-reduced-motion:reduce){.build-shot-float{animation:none}}
/* Automation tile: one close crop of the rules list, faded at the bottom */
/* AppSwift tile: three app shots fanned like cards. Each card is centred, then
   moved by --x / --y and tilted by --r. Hover, tap or focus straightens a card,
   lifts it to the front and grows it into a close preview; the others dim */
.build-fan{overflow:visible;background:none}
.build-fan-card{--x:0%;--y:0%;--r:0deg;position:absolute;top:50%;left:50%;z-index:1;width:60%;aspect-ratio:16/10;margin:0;border-radius:10px;background:#fff;cursor:zoom-in;outline:0;box-shadow:0 0 0 1px rgba(30,40,30,.08),0 24px 48px -20px rgba(30,40,30,.4),0 8px 18px -12px rgba(30,40,30,.25);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .5s}
.build-fan-card:nth-child(1){--x:-34%;--y:7%;--r:-7deg}
.build-fan-card:nth-child(2){--y:-5%;z-index:2}
.build-fan-card:nth-child(3){--x:34%;--y:7%;--r:7deg}
.build-fan-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:inherit}
.build-fan-card figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.build-fan-card:hover,.build-fan-card:focus{z-index:5;transform:translate(-50%,-50%) translate(calc(var(--x)*.55),-9%) rotate(0deg) scale(1.34);box-shadow:0 0 0 1px rgba(30,40,30,.1),0 40px 80px -24px rgba(30,40,30,.5),0 12px 24px -12px rgba(30,40,30,.3)}
.build-fan-card:focus-visible{box-shadow:0 0 0 2px var(--accent),0 40px 80px -24px rgba(30,40,30,.5)}
.build-fan-card:hover figcaption,.build-fan-card:focus figcaption{opacity:1;transform:none}
.build-fan:has(.build-fan-card:hover) .build-fan-card:not(:hover),.build-fan:has(.build-fan-card:focus) .build-fan-card:not(:focus):not(:hover){opacity:.55}
@media(max-width:820px){.build-fan-card{width:60%}.build-fan-card:nth-child(1){--x:-28%}.build-fan-card:nth-child(3){--x:28%}.build-fan-card figcaption{left:7px;bottom:7px;padding:3px 8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.build-fan-card,.build-fan-card figcaption{transition:none}}
/* Your data tile: the workbook fills the well, the dashboard sits on top of it,
   smaller and tilted, and a drawn arrow runs from the sheet to the dashboard */
.build-turn{margin-bottom:0}
.build-turn-dash{position:absolute;top:-3%;right:-4%;width:54%;height:auto;border-radius:9px;transform:rotate(3.5deg);box-shadow:0 0 0 1px rgba(30,40,30,.08),0 30px 60px -18px rgba(30,40,30,.45),0 10px 22px -12px rgba(30,40,30,.3)}
.build-turn-arrow{position:absolute;left:25%;top:15%;width:24%;height:auto;overflow:visible;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff)}
.build-turn-tag{position:absolute;left:14%;top:46%;padding:5px 11px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(40,56,34,.6)}
@media(max-width:820px){.build-turn-dash{right:-2%;width:56%}.build-turn-tag{font-size:11px;left:8%}}
.build-share{margin-bottom:0}
.build-share-qr{position:absolute;right:-5%;bottom:-6%;width:40%;height:auto;border-radius:10px;transform:rotate(-4deg);box-shadow:0 0 0 1px rgba(30,40,30,.08),0 30px 60px -18px rgba(30,40,30,.45),0 10px 22px -12px rgba(30,40,30,.3)}
.build-share-tag{position:absolute;right:22%;bottom:58%;padding:5px 11px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;transform:rotate(-4deg);box-shadow:0 8px 18px -10px rgba(40,56,34,.6)}
@media(max-width:820px){.build-share-qr{right:-2%;width:44%}.build-share-tag{font-size:11px;right:24%;bottom:63%}}
.build-zoom{overflow:hidden;background:#fff;box-shadow:0 0 0 1px #e3e9df,0 22px 46px -30px rgba(40,56,34,.4)}
.build-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}