/* /partners: what Cantai can be inside another company's product. Few things per screen, one visual
   per section, one paper band, and motion only where it explains something (after Vercel Partners,
   Cursor Enterprise and Apple at Work). Laid out with site.css's .wrap, .sec and .lbl like the other
   pages, and nothing sized by the window's height; partners.js runs the pinned showcase, the brand
   example and the form. */

.cx.pt {
    --paper: #f1ece2; --paper-ink: #17191e; --paper-2: #5d5a52;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-sheet: cubic-bezier(.32, .72, 0, 1);
    --ease-ui: cubic-bezier(.25, 1, .5, 1);
    --ease-img: cubic-bezier(.77, 0, .175, 1);
}
.cx.pt .lbl { display: block; }
.cx .h2 { margin: 12px 0 0; font: 400 clamp(32px, 3.4vw, 46px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--fg); max-width: 22ch; }

/* ---------- hero: one sentence, one button, the ensemble on one flat block ---------- */
.cx .pt-hero { padding: 40px 0 72px; }
.cx .pt-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.cx .pt-hero h1 { margin: 0; font: 300 clamp(46px, 5.4vw, 84px)/.98 var(--serif); letter-spacing: -.02em; }
.cx .pt-hero h1 .ln { display: block; }
.cx .pt-hero h1 em { font-style: italic; color: var(--a300); }
.cx .pt-hero .sub { margin-top: 22px; font-size: 17px; color: var(--fg3); max-width: 34ch; }
.cx .pt-hero .acts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.cx .pt-hero .hero-lyr { margin-top: 22px; max-width: 30ch; }
/* The line heard for real: one audio for the page, a play/stop button wherever the line is shown. */
.cx .listen .i-stop, .cx .listen[aria-pressed="true"] .i-play { display: none; }
.cx .listen[aria-pressed="true"] .i-stop { display: block; }
.cx .listen[aria-pressed="true"] { border-color: var(--t300); color: var(--t300); }
.cx .pt-hero .media { position: relative; height: clamp(420px, 42vw, 560px); overflow: clip; }
.cx .pt-hero .blk { position: absolute; right: 0; top: 0; width: 82%; height: 64%; background: var(--t400); }
.cx .pt-hero .ens { position: absolute; left: 6%; bottom: 0; width: 76%; height: 90%; object-fit: cover; object-position: 50% 0; background: #efeeea; }
@media (max-width: 900px) { .cx .pt-hero { padding: 24px 0 40px; } .cx .pt-hero .wrap { grid-template-columns: 1fr; gap: 32px; } .cx .pt-hero .media { height: 440px; } }

/* ---------- where it sings: one pinned stage, four products, the same line (Granola, Mux) ---------- */
/* The stage pins at its own height, for a fixed 420 px of scroll per product. partners.js measures it
   (--stage-h), centres it below the site header (--pin-top) and shrinks the windows on short screens
   (a laptop with Chrome's toolbars is often under 800 px tall). */
.cx .wh-track { height: calc(var(--stage-h, 715px) + 4 * 420px); }
.cx .wh-stage { position: sticky; top: var(--pin-top, 96px); }
.cx .wh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.cx .wh-head .listen { flex: none; }
.cx .wh-grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.cx .wh-index { list-style: none; margin: 0; padding: 0; }
.cx .wh-index li { position: relative; padding: 11px 0; cursor: pointer; font: 400 21px/1.2 var(--serif); color: var(--fg2); transition: color .3s var(--ease-ui); }
.cx .wh-index li::before, .cx .wh-index li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.cx .wh-index li::before { background: var(--line2); }
.cx .wh-index li::after { background: var(--a300); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.cx .wh-index li.on { color: var(--fg); }
.cx .wh-copy { margin-top: 22px; min-height: 96px; }
.cx .wh-copy p { display: none; font-size: 15.5px; color: var(--fg3); max-width: 30ch; }
.cx .wh-copy p.on { display: block; animation: pt-fade .45s var(--ease-out) both; }
@keyframes pt-fade { from { opacity: 0; } }
.cx .wh-frames { position: relative; height: 540px; }
.cx .frame { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .5s var(--ease-sheet), translate .5s var(--ease-sheet); }
.cx .frame.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.cx .frame > :is(.uiw, .phone) { scale: var(--fit, 1); transform-origin: 50% 0; }
.cx .fcap { display: none; margin: 0 0 12px; font: 400 22px/1.2 var(--serif); }
@media (max-width: 900px), (max-height: 599px) {
    .cx .wh-track { height: auto; }
    .cx .wh-stage { position: static; }
    .cx .wh-grid { display: block; }
    .cx .wh-side { display: none; }
    .cx .wh-frames { height: auto; display: grid; gap: 40px; }
    .cx .frame { position: static; opacity: 1; translate: none; display: block; }
    .cx .frame > :is(.uiw, .phone) { scale: none; }
    .cx .fcap { display: block; }
}

/* The product windows: flat, hairline chrome, real UI or plain type, nothing invented. */
.cx .uiw { width: 100%; max-width: 820px; background: #0e1626; border: 1px solid rgba(139, 157, 180, .16); border-radius: 12px; overflow: hidden; }
.cx .uiw .bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(139, 157, 180, .12); font-size: 12px; color: var(--fg2); }
.cx .uiw .bar .lights i { width: 9px; height: 9px; background: rgba(139, 157, 180, .28); opacity: 1; }
.cx .uiw .bar .t { margin-left: 8px; font-weight: 600; color: var(--fg3); }
.cx .plugin-ui { max-width: 520px; }
.cx .plugin-ui img { display: block; width: 100%; height: auto; }
.cx .lesson-ui { padding: 22px 24px 24px; }
.cx .lesson-ui .row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--fg2); }
.cx .lesson-ui h4 { margin: 10px 0 16px; font: 500 28px/1.1 var(--serif); }
.cx .lesson-ui .parts { display: flex; gap: 6px; margin-bottom: 6px; }
.cx .lesson-ui .parts span { padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(139, 157, 180, .2); font-size: 12px; color: var(--fg2); }
.cx .lesson-ui .parts span.on { border-color: rgba(var(--rgb), .6); color: var(--fg); }
.cx .lesson-ui .by { margin-top: 14px; font-size: 12.5px; color: var(--fg2); }
.cx .store-ui { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 22px; padding: 24px; }
.cx .store-ui .cover { aspect-ratio: 3 / 4; background: var(--paper); color: var(--paper-ink); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.cx .store-ui .cover b { font: 600 20px/1 var(--serif); }
.cx .store-ui .cover small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-2); }
.cx .store-ui h4 { margin: 0; font: 500 28px/1.1 var(--serif); }
.cx .store-ui .meta { font-size: 12.5px; color: var(--fg2); margin-top: 4px; }
.cx .store-ui .tracks { margin-top: 14px; border-top: 1px solid rgba(139, 157, 180, .12); }
.cx .store-ui .tracks div { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 36px; border-bottom: 1px solid rgba(139, 157, 180, .08); font-size: 12.5px; color: var(--fg3); }
.cx .store-ui .tracks div span + span { color: var(--fg2); }
@media (max-width: 520px) { .cx .store-ui { grid-template-columns: 1fr; } .cx .store-ui .cover { width: 120px; } }
.cx .phone { width: 290px; max-width: 100%; border: 1px solid rgba(139, 157, 180, .22); border-radius: 36px; padding: 11px; background: #0e1626; }
.cx .phone .scr { border-radius: 26px; background: #0b1220; padding: 20px 18px; min-height: 500px; }
.cx .phone .notch { width: 88px; height: 20px; border-radius: 12px; background: #050912; margin: -8px auto 18px; }
.cx .phone .t1 { font-size: 11px; color: var(--fg2); letter-spacing: .12em; text-transform: uppercase; }
.cx .phone h4 { margin: 6px 0 14px; font: 500 24px/1.1 var(--serif); }
.cx .phone .it { padding: 12px 0; border-top: 1px solid rgba(139, 157, 180, .1); }
.cx .phone .it b { display: block; font: 500 18px/1.15 var(--serif); }
.cx .phone .it small { font-size: 11.5px; color: var(--fg2); }

/* The line, as type: what has been sung in ink, the syllable being sung in the accent (Apple Music Sing). */
.cx .lyr { margin: 20px 0 0; font: italic 400 27px/1.32 var(--serif); color: rgba(236, 231, 220, .3); }
.cx .lyr span { transition: color .2s var(--ease-ui); }
.cx .lyr span.sung { color: var(--ink); }
.cx .lyr span.now { color: var(--t300); }
.cx .lyr.sm { margin-top: 14px; font-size: 19px; }
.cx .lyr.xs { margin-top: 10px; font-size: 16px; }

/* ---------- the one paper band: what every voice is ---------- */
.cx .pt-band { background: var(--paper); color: var(--paper-ink); }
.cx .pt-band .state { margin: 0; font: 300 clamp(36px, 4.4vw, 68px)/1.08 var(--serif); letter-spacing: -.012em; max-width: 25ch; }
.cx .pt-band .state .ln { display: block; }
.cx .pt-band .foot { margin-top: 40px; font-size: 15px; color: var(--paper-2); }

/* ---------- how it works: the three ways in, in plain words ---------- */
.cx .ways { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: w; }
.cx .ways li { counter-increment: w; padding-top: 18px; border-top: 1px solid var(--line2); }
.cx .ways li::before { content: counter(w, decimal-leading-zero); display: block; margin-bottom: 14px; font: 500 12.5px/1 var(--ui); color: var(--fg2); }
.cx .ways b { font: 400 28px/1.15 var(--serif); }
.cx .ways p { margin-top: 10px; font-size: 15.5px; color: var(--fg3); max-width: 34ch; }
.cx .ways-foot { margin-top: 32px; font-size: 15px; color: var(--fg2); }
@media (max-width: 900px) { .cx .ways { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- made to measure: four lines and one example ---------- */
.cx .meas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; align-items: center; }
@media (max-width: 900px) { .cx .meas { grid-template-columns: 1fr; gap: 44px; } }
.cx .rows { margin-top: 32px; border-top: 1px solid var(--line2); }
.cx .rows div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.cx .rows b { font: 600 11px/1.9 var(--ui); letter-spacing: .15em; text-transform: uppercase; color: var(--fg2); }
.cx .rows span { color: var(--fg3); font-size: 15.5px; }
@media (max-width: 560px) { .cx .rows div { grid-template-columns: 1fr; gap: 2px; } }

/* The same listing in three looks, turning on its own (Stripe Connect's "THE BRUSH"). */
.cx .brandbox { height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); }
.cx .brand { position: relative; height: 100%; }
.cx .brand .seg2 { position: absolute; z-index: 3; top: 12px; left: 50%; translate: -50% 0; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(23, 25, 30, .1); }
.cx .brand .seg2 button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font: 600 11.5px var(--ui); color: var(--paper-2); white-space: nowrap; transition: color .2s var(--ease-ui), background .2s var(--ease-ui); }
.cx .brand .seg2 button[aria-pressed="true"] { background: #fff; color: var(--paper-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cx .bv { position: absolute; inset: 0; padding: 62px 26px 20px; clip-path: inset(0 0 0 100%); transition: clip-path .45s cubic-bezier(.33, 1, .68, 1); }
.cx .bv.on { clip-path: inset(0 0 0 0); z-index: 2; }
.cx .bv .hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.cx .bv .lib { font-size: 11px; }
.cx .bv .tt { margin-top: 14px; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; align-items: start; }
.cx .bv .cv { aspect-ratio: 3 / 4; display: flex; align-items: flex-end; padding: 8px; font: 600 14px/1 var(--serif); }
.cx .bv h5 { margin: 0; font-size: 26px; line-height: 1.1; }
.cx .bv .m { font-size: 12px; margin-top: 4px; }
.cx .bv .tr { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 5px; }
.cx .bv .tr span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; }
.cx .bv .by { margin-top: 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.cx .bv .lgc { height: 16px; }
.cx .bv.c { background: #0b1120; color: var(--fg); }
.cx .bv.c :is(.lib, .m) { color: var(--fg2); }
.cx .bv.c .cv { background: var(--paper); color: var(--paper-ink); }
.cx .bv.c h5 { font-family: var(--serif); font-weight: 500; }
.cx .bv.c .tr span { border: 1px solid rgba(var(--rgb), .45); color: var(--a200); }
.cx .bv.c .by { color: var(--a300); }
.cx .bv:is(.co, .y) { background: #faf6ee; color: #2b1d3a; }
.cx .bv .lg { font: 600 16px/1 'Fraunces', Georgia, serif; color: #5b2a6e; }
.cx .bv:is(.co, .y) :is(.lib, .m) { color: #7b6a86; }
.cx .bv:is(.co, .y) .cv { background: #5b2a6e; color: #faf6ee; }
.cx .bv:is(.co, .y) h5 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.cx .bv:is(.co, .y) .tr span { background: #efe4f2; color: #5b2a6e; }
.cx .bv.co .by { color: #0b1120; display: flex; align-items: center; gap: 6px; }
.cx .bv.co .by img { height: 12px; }
.cx .bv.y .by { color: #9b8aa6; }

/* ---------- how it starts, beside the form ---------- */
.cx .start2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; margin-top: 40px; align-items: start; }
@media (max-width: 900px) { .cx .start2 { grid-template-columns: 1fr; gap: 44px; } }
.cx .steps2 { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.cx .steps2 li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 15px 0; border-top: 1px solid var(--line2); }
.cx .steps2 li:last-child { border-bottom: 1px solid var(--line2); }
.cx .steps2 li::before { content: counter(s, decimal-leading-zero); font: 500 12.5px/1.9 var(--ui); color: var(--fg2); }
.cx .steps2 b { font: 500 20px/1.2 var(--serif); }
.cx .steps2 p { margin-top: 2px; font-size: 14.5px; color: var(--fg3); }
.cx .kinds { border: 0; margin: 0 0 22px; padding: 0; }
.cx .kinds legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--fg3); }
.cx .kinds .opts2 { display: flex; flex-wrap: wrap; gap: 6px; }
.cx .kinds label { position: relative; padding: 8px 13px; border: 1px solid var(--line2); border-radius: 10px; font-size: 14px; color: var(--fg3); cursor: pointer; transition: border-color .2s var(--ease-ui), color .2s var(--ease-ui), background .2s var(--ease-ui); }
.cx .kinds label:hover { color: var(--fg); border-color: rgba(var(--rgb), .45); }
.cx .kinds input { position: absolute; opacity: 0; pointer-events: none; }
.cx .kinds label:has(input:checked) { color: var(--fg); border-color: var(--a400); background: rgba(var(--rgb), .1); }
.cx .kinds label:has(input:focus-visible) { outline: 2px solid var(--a300); outline-offset: 2px; }
/* site.css spaces a field after a field, which would drop the second one of a row. */
.cx .flds .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx .flds .row2 > .field + .field { margin-top: 0; }
.cx .flds .row2 + .field, .cx .flds > .field + .field { margin-top: 14px; }
@media (max-width: 560px) { .cx .flds .row2 { grid-template-columns: 1fr; } }
.cx .pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cx .flds .foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.cx .flds .foot .hint { font-size: 13px; color: var(--fg2); }
.cx .flds .foot .btn[disabled] { opacity: .7; cursor: progress; }
.cx .flds .err { margin-top: 12px; font-size: 13.5px; color: #f3a3a6; }
.cx .flds .field :is(input, textarea)[aria-invalid="true"] { border-color: rgba(229, 72, 77, .7); }
.cx .sent { outline: none; }
.cx .sent h3 { font: 500 32px/1.1 var(--serif); }
.cx .sent p { margin-top: 10px; color: var(--fg3); }
.cx .sent b { color: var(--fg); }

/* ---------- close: where Cantai already sings, and the open slot (Output's "You*") ---------- */
.cx .pt-hosts { border-top: 1px solid var(--line2); }
.cx .pt-hosts .wrap { display: flex; align-items: center; gap: 16px 36px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 34px; }
.cx .pt-hosts .lbl { margin-right: 8px; }
.cx .pt-hosts span { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--fg3); }
.cx .pt-hosts img { width: 26px; height: 26px; border-radius: 7px; }
.cx .pt-hosts a { margin-left: auto; padding: 3px 12px 4px; background: var(--a400); color: #0b1120; font-size: 15px; font-weight: 700; text-decoration: none; }
.cx .pt-hosts a:hover { background: var(--a300); }

/* ---------- motion: the hero arrives, the photo uncovers, the statement rises; nothing else ---------- */
html.pt-mo .cx .e-line .ln { opacity: 0; translate: 0 .2em; filter: blur(6px); }
html.pt-mo .cx .e-line.in .ln { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .8s var(--ease-out), translate .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + var(--d0, 0ms)); }
html.pt-mo .cx .e-reveal { clip-path: inset(100% 0 0 0); }
html.pt-mo .cx .e-reveal.in { clip-path: inset(0); transition: clip-path 1s var(--ease-img) var(--d0, 0ms); }
html.pt-mo .cx .e-wipe { clip-path: inset(0 100% 0 0); }
html.pt-mo .cx .e-wipe.in { clip-path: inset(0); transition: clip-path .8s cubic-bezier(.65, 0, .35, 1) var(--d0, 0ms); }
@media (prefers-reduced-motion: reduce) { .cx.pt * { transition: none !important; animation: none !important; } }