/* Inner pages in the new homepage's design language (mock, 2026-09-27).
   Loads AFTER /home.css, which already owns the tokens, the header (.vs-nav),
   buttons, eyebrows, .serifline, .feat/.split/.center, the bento art, the
   pricing cards (.pr2), the FAQ (.faq), the closing band (.final) and the
   footer. This file adds only what the inner pages need on top of that, so an
   inner page and the homepage can never drift apart. Port as /inner.css. */

/* ---------- hero ---------- */
.ih{max-width:1240px;margin:0 auto;padding:74px 32px 0;text-align:center}
.ih .eyebrow{margin-bottom:18px}
.ih h1{font-size:60px;line-height:1.06;letter-spacing:-2px;max-width:1060px;margin:0 auto;text-wrap:balance}
.ih .lede{font-size:21px;line-height:1.55;color:var(--muted);max-width:860px;margin:24px auto 0;text-wrap:pretty}
.ih .lede strong{color:var(--text);font-weight:600}
.ih .cta{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.unlock{margin-top:12px;font-size:14.5px;color:var(--muted)}
.unlock b{color:#d96400;font-weight:600}
/* the quiet buy line (decision_quiet_buy_link): a statement, never a second button */
.buyline{margin-top:6px;font-size:14.5px;color:var(--muted)}
.buyline a{color:var(--plum);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.buyline a:hover{color:#4f2a5c}
.buyline .arr{width:13px;height:13px;transition:transform .25s var(--ease)}
.buyline a:hover .arr{transform:translateX(3px)}
.ih .proof{margin:34px auto 0;max-width:780px}
.ih .proof .stars{color:#ff9f0a;font-size:13px;letter-spacing:2px}
.ih .proof blockquote{margin:8px 0 0;font-size:21px;line-height:1.4;font-weight:500;letter-spacing:-.3px}
.ih .proof figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.ih .proof figcaption b{color:var(--text);font-weight:600}
/* a picture under the hero copy (the /pro loop, a product shot) */
.ih-shot{max-width:1120px;margin:52px auto 0;padding:0 32px}
.ih-shot .frame{border-radius:26px;overflow:hidden;background:#0d1b2a;box-shadow:0 30px 80px -30px rgba(20,40,80,.45),0 2px 6px rgba(0,0,0,.06);aspect-ratio:1600/928}
.ih-shot video,.ih-shot img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- jump chips: a sticky row of anchors under the header ---------- */
.chips{position:sticky;top:62px;z-index:40;margin-top:64px;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
.chips.stuck{border-bottom-color:rgba(0,0,0,.07)}
.chips-in{display:flex;justify-content:center;max-width:1180px;margin:0 auto;padding:10px 32px;overflow-x:auto;scrollbar-width:none}
.chips-in nav,.chips-in .grp-pills{display:inline-flex;gap:2px;background:rgba(0,0,0,.045);border-radius:999px;padding:4px;flex:none}
.chips-in::-webkit-scrollbar{display:none}
.chips a{flex:none;font-size:14px;font-weight:500;color:#424245;padding:7px 15px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.chips a:hover{color:var(--text)}
/* where you are: bold plus orange on a white pill, the same convention as the audience bar (site-nav.css .uc-switch) */
.chips a.on{background:#fff;color:var(--accent-dark,#d96400);font-weight:650;box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04)}
[id]{scroll-margin-top:130px}

/* ---------- a feature group: copy + a list on one side, a picture on the other ---------- */
section.grp{padding:120px 32px 0}
.chips + section.grp{padding-top:72px}
@media (min-width:861px){.grp .split.inv{grid-template-columns:1fr 1.15fr}}
.grp .split{align-items:center}
.grp .split h2,.grp h2{white-space:normal;text-wrap:balance}
.grp h2{font-size:42px;letter-spacing:-1.2px}
.grp .copy .body{font-size:18.5px}
.flist{list-style:none;margin:26px 0 0;padding:0}
.flist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;padding:15px 0;border-top:1px solid var(--line)}
.flist li:last-child{border-bottom:1px solid var(--line)}
.flist b{font-size:16.5px;font-weight:600;letter-spacing:-.1px}
.flist span{grid-column:1;font-size:15.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.flist .t{grid-column:2;grid-row:1;align-self:start;margin-top:2px}
.flist code,.body code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.88em;background:var(--bg-soft);border-radius:5px;padding:1px 5px;color:var(--accent-dark)}
.t{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;border-radius:5px;padding:3px 6px;line-height:1.2;white-space:nowrap}
.t.free{color:#1a7f3c;background:#dff5e6}
.t.pro{color:#fff;background:var(--plum)}
.t.beta{color:var(--plum);background:#f1e8f6}
.golinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:15.5px;font-weight:600}
.golinks a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-dark)}
.golinks a:hover .arr{transform:translateX(4px)}
.golinks .arr{width:14px;height:14px;transition:transform .25s var(--ease)}
.center .golinks{justify-content:center}
/* a list that runs under a full-width picture, three or four across */
.flist.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:34px}
.flist.row li{border-bottom:0;align-content:start}
.flist.row.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* the picture: one of the homepage's bento drawings, enlarged, on its tint */
.vis{border-radius:28px;background:var(--vbg,#f5f5f7);min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.vis.c-purple{--vbg:#f4edfd}.vis.c-green{--vbg:#eaf8ee}.vis.c-blue{--vbg:#e9f2fe}.vis.c-orange{--vbg:#fff2e5}.vis.c-indigo{--vbg:#eeeffd}.vis.c-teal{--vbg:#e5f7f7}
/* the drawing is a real homepage bento card (same markup, same CSS), enlarged */
.vis .bento{display:block;margin:0;width:316px;zoom:1.45}
.vis .bento .bc,.card .pic .bento .bc{padding:0;border:0;box-shadow:none;background:transparent;border-radius:14px}
.vis .bento .bc:hover,.card .pic .bento .bc:hover{transform:none;box-shadow:none}
.vis .bento .bc .demo,.card .pic .bento .bc .demo{margin:0;border-radius:14px}
.vis .cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;font-weight:600;color:var(--muted)}

/* the homepage's live demos, placed inside a group */
.grp .duo{margin:0}
.grp .sh-win{margin-top:40px}
.grp .beats{margin-top:22px}

/* ---------- the privacy strip (a teaser that links to /privacy) ---------- */
.pstrip{border-radius:28px;padding:44px 48px 48px;background:linear-gradient(160deg,#f2f8f3,#eaf3ec)}
.pstrip .top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.pstrip h2{font-size:40px;margin:0;letter-spacing:-1.1px}
.pstrip .golinks{margin:0 0 6px}
.pstrip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pstrip li{background:#fff;border-radius:18px;padding:18px 18px 20px;box-shadow:0 1px 3px rgba(31,122,66,.1)}
.pstrip li{padding:22px 24px 24px}
.pstrip li b{display:block;font-size:17px;margin-bottom:5px}
.pstrip li span{font-size:15.5px;line-height:1.5;color:var(--muted)}

/* ---------- one quote, big ---------- */
.quote1{max-width:900px;margin:0 auto;text-align:center}
.quote1 .stars{color:#ff9f0a;font-size:14px;letter-spacing:2px}
.quote1 blockquote{margin:14px 0 0;font-size:30px;line-height:1.35;font-weight:500;letter-spacing:-.6px;text-wrap:balance}
.quote1 figcaption{margin-top:18px;font-size:15px;color:var(--muted)}
.quote1 figcaption b{color:var(--text);font-weight:600}
.quotes2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:0 auto}
.quotes2 figure{margin:0;border-radius:22px;background:var(--bg-soft);padding:28px 30px}
.quotes2 blockquote{font-size:20px;line-height:1.45;font-weight:500;letter-spacing:-.3px}
.quotes2 figcaption{margin-top:14px;font-size:14px;color:var(--muted)}
.quotes2 figcaption b{color:var(--text);font-weight:600}

/* ---------- cards that link onward (the /pro reasons, related pages) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--card-shadow);overflow:hidden;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
a.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 50px rgba(0,0,0,.09)}
.card .pic{height:200px;background:var(--vbg,#f5f5f7);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.card .pic > img,.card .pic > video{width:100%;height:100%;object-fit:cover;display:block}
.card .pic .bento{display:block;margin:0;width:316px;zoom:1.02}
.card .txt{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:20px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.card h3 .t{margin-left:auto}
.card p{font-size:15.5px;line-height:1.5;color:var(--muted);margin-top:8px}
.card .more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--accent-dark)}
.card .more .arr{width:14px;height:14px;transition:transform .25s var(--ease)}
a.card:hover .more .arr{transform:translateX(4px)}
.card.wide{grid-column:span 2}
.card.c-purple{--vbg:#f4edfd}.card.c-green{--vbg:#eaf8ee}.card.c-blue{--vbg:#e9f2fe}.card.c-orange{--vbg:#fff2e5}.card.c-indigo{--vbg:#eeeffd}.card.c-teal{--vbg:#e5f7f7}

/* ---------- real tables (search engines and AI answers read <table>) ---------- */
.tbl-wrap{margin-top:44px;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--card-shadow);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th,.tbl td{padding:15px 22px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl thead th{border-top:0;background:var(--bg-soft);font-size:13.5px;font-weight:600;color:var(--text)}
.tbl tbody th{font-weight:500;color:var(--text)}
.tbl td{color:var(--muted)}
.tbl tbody tr.grp-row th{background:#fafafc;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b4a86;padding-top:18px}
.tbl .c{text-align:center;width:110px}
.tbl .yes{color:var(--accent);font-weight:700;font-size:17px}
.tbl .no{color:#c7c7cc}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:#fcfcfd}
.tbl tbody tr.grp-row:hover th{background:#fafafc}
.tbl .t{margin-left:6px;vertical-align:1px}

/* ---------- steps (how it works), numbered cards ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px;list-style:none;padding:0}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{border-radius:22px;background:var(--bg-soft);padding:24px 22px 26px}
.steps .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--accent-dark);font-weight:700;font-size:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.steps h3{font-size:18px;letter-spacing:-.2px;margin-top:14px}
.steps p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:6px;text-wrap:pretty}

/* ---------- a soft callout box ---------- */
.callout{display:flex;gap:22px;align-items:flex-start;border-radius:24px;padding:28px 32px;background:#fff7ef;border:1px solid #ffe2c7;margin-top:28px}
.callout .ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--accent-dark);box-shadow:0 1px 3px rgba(217,100,0,.15)}
.callout .ic svg{width:22px;height:22px}
.callout h3{font-size:19px;letter-spacing:-.2px}
.callout p{font-size:16px;line-height:1.55;color:var(--muted);margin-top:4px}
.callout.green{background:#f2f8f3;border-color:#d9ecdf}
.callout.green .ic{color:#1f8a4c}

/* ---------- the FAQ on inner pages: the homepage's, with room for longer answers ---------- */
.faq.inner{padding-top:120px}
.faq.inner .faq-list details p + p{margin-top:12px}
.faq.inner .faq-list details ul{margin:10px 0 0 20px;color:var(--muted);font-size:16.5px;line-height:1.6}
.faq.inner .faq-list a{color:var(--text);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.updated{margin-top:26px;font-size:13.5px;color:var(--faint)}

/* ---------- the closing band keeps the homepage's, plus a quiet link row ---------- */
.final .also{margin-top:22px;font-size:14.5px;color:var(--muted)}
.final .also a{color:var(--accent-dark);font-weight:600;margin:0 6px}

/* ---------- /privacy: the promise card, six facts, two callouts, the table note ---------- */
.pv-card-wrap{padding-top:52px}
.pv-card{max-width:1040px;margin:0 auto;border-radius:30px;background:#f7f5ef;padding:40px 48px}
.pv-card .promise{margin:0;max-width:none;gap:40px;align-items:center}
.pv-card .promise img{width:210px;height:210px;border-radius:26px}
.pv-card .promise blockquote{font-size:24px;line-height:1.5}
.pv-card .promise .by{margin-top:16px}
.facts6{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.facts6 li{border-radius:22px;padding:26px 26px 28px;background:linear-gradient(160deg,#f2f8f3,#eaf3ec)}
.facts6 .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff;color:#1f8a4c;box-shadow:0 1px 3px rgba(31,122,66,.12)}
.facts6 .ic svg{width:21px;height:21px}
.facts6 h3{font-size:19px;letter-spacing:-.25px;margin-top:16px}
.facts6 p{font-size:15.5px;line-height:1.5;color:var(--muted);margin-top:6px;text-wrap:pretty}
.callouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.callouts .callout{margin-top:0}
.tbl-note{margin-top:18px;text-align:center;font-size:15px;color:var(--muted)}
.tbl code{font-size:12.5px;color:var(--faint);background:none;padding:0;font-family:"SF Mono",ui-monospace,Menlo,monospace}
.final .ctas{flex-wrap:wrap}
@media (max-width:980px){.facts6{grid-template-columns:repeat(2,minmax(0,1fr))}.callouts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.pv-card{padding:28px 22px}.pv-card .promise{flex-direction:column;text-align:center;gap:20px}.pv-card .promise img{width:150px;height:150px}.pv-card .promise blockquote{font-size:19px}
}
@media (max-width:600px){.facts6{grid-template-columns:minmax(0,1fr)}}

/* ---------- /pro: card pictures, the details row, the quote under the hero ---------- */
.card .pic.full .bento{width:100%;height:100%;zoom:1}
.card .pic.full .bento .bc,.card .pic.full .bento .bc .demo{height:100%;border-radius:0}
.card .pic.pad{padding:20px 24px;background:#fff;border-bottom:1px solid var(--line)}
.card .pic.pad img{object-fit:contain}
.card .pic.pad.top{padding:18px 18px 0;align-items:flex-start}
.card .pic.pad.top img{object-fit:cover;object-position:top center;border-radius:8px 8px 0 0;box-shadow:0 0 0 1px var(--line)}
.cards.two .card .pic{height:260px}
.extras{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:18px;border-radius:22px;background:var(--bg-soft);padding:20px 26px}
.extras .lbl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b4a86}
.extras ul{display:flex;flex-wrap:wrap;gap:8px 8px;list-style:none;margin:0;padding:0;flex:1}
.extras li{font-size:14.5px;background:#fff;border-radius:999px;padding:6px 13px;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.extras .golinks{margin:0}
.quote1.top{margin-top:48px;padding:0 32px}
section.pr2 + section.grp{padding-top:40px}
.quote1.top blockquote{font-size:24px}
.tbl.cmp tbody th{font-weight:400;color:var(--text);line-height:1.45}
.final .btn-ghost{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.final .btn-ghost:hover{background:#fafafa}
@media (max-width:860px){.cards.two .card .pic{height:210px}.quote1.top blockquote{font-size:20px}.extras{padding:18px}}

/* ---------- /coach and /companion: a light hero frame, a tall picture panel ---------- */
.ih-shot .frame.light{background:#fff;border:1px solid var(--line);box-shadow:var(--card-shadow);aspect-ratio:auto}
.ih-shot .frame.light img{height:auto}
.vis.tall{min-height:0;height:560px;align-items:flex-start;padding:30px 30px 0}
.vis.tall img{width:100%;max-width:440px;height:auto;border-radius:14px 14px 0 0;box-shadow:0 18px 40px -18px rgba(20,60,30,.35)}
.vis.tall:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(rgba(234,248,238,0),var(--vbg))}
.vis.photo{padding:0;min-height:0}
.vis.photo img{display:block;width:100%;height:100%;object-fit:cover}
.copy .callout{margin-top:26px}
.ih-shot.narrow{max-width:960px}
.ih-shot .frame.photo{aspect-ratio:1728/1152;background:#eef1f5}
.steps.col{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:26px}
.steps.col li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:18px 20px}
.steps.col .n{grid-row:span 2}
.steps.col h3{margin-top:3px;font-size:17px}
.steps.col p{margin-top:2px}
.cards .card .pic.pad img{max-height:100%}
@media (max-width:860px){.vis.tall{height:420px}}

/* tables on phones: the Free/Pro table just tightens; a wide table (class "stack") turns each row into a card */
@media (max-width:700px){
  .tbl.cmp th,.tbl.cmp td{padding:12px 10px 12px 14px}
  .tbl.cmp .c{width:46px;padding-left:4px;padding-right:4px}
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:auto}
  .tbl.stack tr{padding:16px 18px;border-top:1px solid var(--line)}
  .tbl.stack tr:first-child{border-top:0}
  .tbl.stack th,.tbl.stack td{border:0;padding:0}
  .tbl.stack th{font-size:16px;margin-bottom:8px}
  .tbl.stack td{font-size:14.5px;margin-top:6px}
  .tbl.stack td:before{content:attr(data-label);display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
  .extras{flex-direction:column;align-items:flex-start}
}

/* ---------- /pro: the revived tabbed demo sits under the hero copy ---------- */
.pro-demo{max-width:1180px;margin:52px auto 0;padding:0 32px}

/* ---------- "simple and beautiful": a calm prompter with no Stagehand marks ----------
   One heading and no marks, so the real app shows the words, one row of controls
   and the section name, with no tally (PrompterState: the tally needs marks). */
.sh-win.calm{margin-top:44px}
.sh-win.calm .take-screen{height:440px}
.calm .vs-mount{width:58%}
.calm .vs-mount .sh-frame{height:250px}
.calm .vs-mount .sh-reading{padding:78px 0}
.calm .vs-mount .sh-h{font-size:26px}
.calm .vs-mount .sh-body{font-size:21px;line-height:1.5}
.calm .sh-count,.calm .sh-pips{visibility:hidden}
.simple4{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.simple4 li{border-top:1px solid var(--line);padding-top:18px}
.simple4 b{display:block;font-size:17px;letter-spacing:-.2px}
.simple4 span{display:block;margin-top:5px;font-size:15.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.simple4 .t{margin-top:10px}
.madeby{margin-top:26px;text-align:center;font-size:15.5px;color:var(--muted)}
.madeby b{color:var(--text);font-weight:600}
@media (max-width:980px){.simple4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sh-win.calm .menubar span:not(.r){display:none}}
.sh-win.calm .menubar .r{white-space:nowrap}
@media (max-width:860px){.calm-notch{width:112px;margin-left:-56px;height:24px}.pro-demo{padding:0 16px;margin-top:36px}.sh-win.calm .take-screen{height:360px}.calm .vs-mount{width:88%}.calm .vs-mount .sh-frame{height:210px}.calm .vs-mount .sh-reading{padding:60px 0}.calm .vs-mount .sh-body{font-size:17px}.calm .vs-mount .sh-h{font-size:21px}}
@media (max-width:600px){.simple4{grid-template-columns:minmax(0,1fr);gap:0}.simple4 li{padding:16px 0}}

/* Glass: the app's translucent prompter (a dark scrim over a heavy blur, about 80%: what's behind
   becomes a soft glow, its details don't show through; Steve 2026-09-27 against the real app),
   instead of the engine's solid black. Page-level only; the shared engine is untouched.
   The engine's top/bottom fades are solid colors, so on glass they become a mask. */
.sh-win.calm .vs-mount .sh-stage{background:rgba(22,23,27,.8);-webkit-backdrop-filter:blur(40px) saturate(1.3);backdrop-filter:blur(40px) saturate(1.3);box-shadow:0 26px 52px -12px rgba(10,20,40,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.sh-win.calm .vs-mount .sh-frame::before,.sh-win.calm .vs-mount .sh-frame::after{display:none}
.sh-win.calm .vs-mount .sh-frame{-webkit-mask-image:linear-gradient(transparent,#000 46px,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(transparent,#000 46px,#000 calc(100% - 46px),transparent)}
.sh-win.calm .vs-mount .sh-drawer{background:rgba(9,9,11,.94);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.sh-win.calm .sh-nav{white-space:nowrap}
/* Tellie Free: mic off, play pressed (the engine dims its pause button for voice mode) */
.sh-win.calm .sh-bic.pause{opacity:1;transition:box-shadow .2s,background .2s}
.sh-win.calm .sh-bic.pressed{background:rgba(255,255,255,.22);box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.sh-win.calm .sh-bic.off{color:#c7c7cc}
/* the script in ALL CAPS: the app's "Display document in ALL CAPS" setting (whole document) */
.sh-win.calm .sh-reading{text-transform:uppercase}
.sh-win.calm .para-gap{display:block;height:.7em}
.sh-win.calm .vs-mount .sh-body{letter-spacing:.01em}
/* play/pause works: the engine turns off clicks on looping demos' bars, so re-enable just this button */
.sh-win.calm .sh-demo .sh-bic.pause{pointer-events:auto;cursor:pointer}
.sh-win.calm .sh-demo .sh-bic.pause:hover{background:rgba(255,255,255,.14)}
/* the notch, with its "turned corners": concave shoulders into the top edge of the screen */
.calm-notch{position:absolute;z-index:6;top:0;left:50%;width:172px;height:30px;margin-left:-86px;background:#000;border-radius:0 0 13px 13px}
.calm-notch{transition:opacity .45s ease}
.calm-open .calm-notch{opacity:0}
.calm-notch::before,.calm-notch::after{content:"";position:absolute;top:0;width:9px;height:9px}
.calm-notch::before{left:-9px;background:radial-gradient(circle at 0 100%,transparent 8.5px,#000 9px)}
.calm-notch::after{right:-9px;background:radial-gradient(circle at 100% 100%,transparent 8.5px,#000 9px)}
/* the prompter hangs from the top edge the same way: its top corners turn out into the screen edge */
.sh-win.calm .vs-mount::before,.sh-win.calm .vs-mount::after{content:"";position:absolute;z-index:4;top:0;width:16px;height:16px;background:rgba(22,23,27,.8);-webkit-backdrop-filter:blur(40px) saturate(1.3);backdrop-filter:blur(40px) saturate(1.3)}
.sh-win.calm .vs-mount::before{left:-16px;-webkit-mask:radial-gradient(circle at 0 100%,transparent 15.5px,#000 16px);mask:radial-gradient(circle at 0 100%,transparent 15.5px,#000 16px)}
.sh-win.calm .vs-mount::after{right:-16px;-webkit-mask:radial-gradient(circle at 100% 100%,transparent 15.5px,#000 16px);mask:radial-gradient(circle at 100% 100%,transparent 15.5px,#000 16px)}
.sh-win.calm .vs-mount .sh-stage{border-radius:0 0 22px 22px}
.sh-win.calm .vs-mount .sh-reading{padding-top:92px}
.sh-win.calm .vs-mount .sh-body{color:#fff}
/* the document you're reading from, behind the glass */
.calm-doc{position:absolute;z-index:2;left:50%;top:64px;width:84%;height:360px;transform:translateX(-50%);background:#fff;border-radius:12px;box-shadow:0 18px 40px -16px rgba(20,40,80,.35);padding:34px 46px 0;overflow:hidden}
.calm-doc h4{font-size:22px;letter-spacing:-.3px;color:#1d1d1f;margin:0 0 16px}
.calm-doc i{display:block;height:9px;border-radius:5px;background:#d9dde3;margin:0 0 12px}
.calm-doc i:nth-child(3n){width:93%}.calm-doc i:nth-child(4n){width:97%}.calm-doc i:nth-child(5n){width:78%}.calm-doc i:nth-child(7n){width:60%}
.calm-doc .hl{background:#ffcf8a}
@media (max-width:860px){.calm-doc{width:96%;top:52px;padding:22px 18px 0}.calm-doc h4{font-size:16px}}

/* ---------- fewer rounded boxes (Steve 2026-09-27): pictures that float on white,
   a real terminal for developers, facts set as type, open cards ---------- */
.vis.bare{background:none;min-height:0;overflow:visible;padding:10px 0}
.vis.bare .bento{zoom:2.05}
.vis.bare.slide .bento{zoom:1.5}
.vis.bare.slide .bento .bc .demo{height:180px;border-radius:14px;overflow:hidden;box-shadow:0 26px 60px -24px rgba(40,20,80,.5)}
.eyebrow .free{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;color:#1a7f3c;background:#dff5e6;border-radius:5px;padding:3px 6px;margin-left:8px;vertical-align:1px}
.vis.bare .bento .bc .demo{background:none;height:auto;min-height:180px;overflow:visible}
.vis.bare .cmp .ipad,.vis.bare .cmp .iphone{box-shadow:0 22px 40px -18px rgba(20,40,80,.45)}
.shot-float{margin:0}
.shot-float img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 30px 70px -30px rgba(20,40,80,.45),0 0 0 1px rgba(0,0,0,.05)}
.term{margin:0;border-radius:14px;background:#141417;color:#e8e8ea;box-shadow:0 30px 70px -30px rgba(10,10,20,.55);overflow:hidden}
.term .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#232327;font-size:12px;color:#9a9aa0}
.term .bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.term .bar i:nth-child(2){background:#febc2e}.term .bar i:nth-child(3){background:#28c840}
.term .bar span{margin-left:auto;margin-right:auto;transform:translateX(-24px)}
.term pre{margin:0;padding:20px 22px 24px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.term .c{color:#7d7d85}.term .k{color:#ff9f0a}.term .s{color:#9fe3a8}
.pline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px}
.pline li{list-style:none;padding:4px 30px;border-left:1px solid var(--line)}
.pline li:first-child{border-left:0;padding-left:0}
.pline .ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eaf3ec;color:#1f8a4c;margin-bottom:12px}
.pline .ic svg{width:17px;height:17px}
.pline b{display:block;font-size:18px;letter-spacing:-.2px}
.pline span{display:block;margin-top:5px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.ptop{text-align:center}
.ptop h2{margin:0}
.ptop .golinks{justify-content:center;margin-top:14px}
.cards.open .card{border:0;box-shadow:none;background:none;overflow:visible}
.cards.open a.card:hover{transform:none;box-shadow:none}
.cards.open .card .pic{border-radius:18px}
.cards.open .card .pic.pad{border:1px solid var(--line)}
.cards.open .card .txt{padding:18px 2px 0}
.cards.open{gap:40px 36px}
.dline{margin-top:30px;text-align:center;font-size:16px;color:var(--muted);line-height:1.8}
.dline b{color:var(--text);font-weight:600;margin-right:8px}
.dline i{font-style:normal;color:#c7c7cc;margin:0 9px}

/* ---------- ONE testimonial style on every interior page: the homepage's featured quote
   (.vfeat in home.css: big quote, orange key phrase, colored initial, bold name, role) ---------- */
section.vsec{padding-top:110px}
.vpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;max-width:1080px;margin:0 auto}
.vpair .vfeat{margin:0;max-width:none}
.vpair .vfeat blockquote{font-size:23px}
@media (max-width:860px){.vis.bare .bento{zoom:1.15}.pline{grid-template-columns:minmax(0,1fr);gap:22px}.pline li{border-left:0;padding:0}.vpair{grid-template-columns:minmax(0,1fr)}.vpair .vfeat blockquote{font-size:20px}section.vsec{padding-top:80px}}

/* ---------- phones ---------- */
@media (max-width:980px){
  .pstrip{padding:34px 28px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flist.row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ih{padding:44px 20px 0}
  .ih h1{font-size:38px;letter-spacing:-1.2px}
  .ih .lede{font-size:18px}
  .ih-shot{padding:0 16px;margin-top:36px}
  .ih-shot .frame{border-radius:16px}
  .chips{top:56px;margin-top:40px}
  .chips-in{justify-content:flex-start;padding:8px 16px}
  section.grp{padding:84px 20px 0}
  .grp h2{font-size:32px;letter-spacing:-.8px}
  .vis{min-height:250px}
  .vis .bento{zoom:1.2}
  .pstrip ul{grid-template-columns:minmax(0,1fr)}
  .pstrip h2{font-size:32px}
  .cards,.cards.two{grid-template-columns:minmax(0,1fr)}
  .card.wide{grid-column:auto}
  .quote1 blockquote{font-size:22px}
  .quotes2{grid-template-columns:minmax(0,1fr)}
  .tbl th,.tbl td{padding:13px 14px;font-size:14.5px}
  .tbl .c{width:64px}
  .callout{padding:22px 20px;gap:16px}
  .faq.inner{padding-top:84px}
}
@media (max-width:600px){
  .steps,.steps.three,.flist.row,.flist.row.three{grid-template-columns:minmax(0,1fr)}
  .vis .bento{zoom:1}
}