:root, [data-theme="light"] { color-scheme:light; --ink:#17171b; --muted:#777780; --line:#e5e4e8; --paper:#fbfbfa; --violet:#6337ff; --violet-dark:#4820d1; --soft:#f0edff; --plum:#24152e; --danger:#a43d55; --header-bg:rgba(251,251,250,.88); --surface:rgba(255,255,255,.82); --surface-solid:#fff; --input-bg:#fff; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[data-theme="gray"] { color-scheme:light; --ink:#1c1c1f; --muted:#6b6b76; --line:#d0d0d4; --paper:#eaeaeb; --violet:#5b2eff; --violet-dark:#4a1fe6; --soft:#dddde0; --plum:#24152e; --danger:#a43d55; --header-bg:rgba(234,234,235,.9); --surface:rgba(243,243,244,.9); --surface-solid:#f3f3f4; --input-bg:#fff; }
[data-theme="high-contrast"] { color-scheme:light; --ink:#000; --muted:#333; --line:#000; --paper:#fff; --violet:#5b2eff; --violet-dark:#3d0fcc; --soft:#f0f0f0; --plum:#150d20; --danger:#8b203c; --header-bg:rgba(255,255,255,.94); --surface:#fff; --surface-solid:#fff; --input-bg:#fff; }
[data-theme="colorful"] { color-scheme:light; --ink:#1c1c1f; --muted:#5b5b6b; --line:#d8d0f0; --paper:#f7f7f5; --violet:#5b2eff; --violet-dark:#4a1fe6; --soft:#ede8ff; --plum:#24152e; --danger:#a43d55; --header-bg:rgba(247,247,245,.9); --surface:rgba(255,255,255,.88); --surface-solid:#fff; --input-bg:#fff; }
[data-theme="dark"] { color-scheme:dark; --ink:#e4e5e9; --muted:#9394a0; --line:#2a2a33; --paper:#131316; --violet:#4C26D4; --violet-dark:#5F3BE6; --soft:#232329; --plum:#0d0810; --danger:#ff9bb2; --header-bg:rgba(19,19,22,.88); --surface:rgba(28,28,34,.9); --surface-solid:#1c1c22; --input-bg:#1c1c22; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background-color:var(--paper); background-image:radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) .8px, transparent .8px); background-size:24px 24px; color:var(--ink); }
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:none; }
a { color:inherit; } button, input { font:inherit; } button { border:0; cursor:pointer; } button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #a899ff; outline-offset:3px; }
.hidden { display:none !important; }
.topbar { position:sticky; z-index:20; top:0; min-height:48px; border-bottom:1px solid var(--line); background:var(--header-bg); backdrop-filter:blur(18px); }
.topbar-inner { width:100%; min-height:48px; margin:0; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.product-brand-lockup, .footer-brand { display:flex; align-items:center; } .product-brand-lockup { gap:0; color:var(--ink); text-decoration:none; } .product-brand-lockup img { display:block; width:24px; height:24px; margin-right:8px; } .product-brand-name { font-size:27px; font-weight:800; letter-spacing:-.065em; line-height:1; } .product-brand-pro { position:relative; top:-.42em; margin-left:3px; color:var(--muted); font-size:13px; font-weight:750; letter-spacing:.08em; line-height:1; }
.footer-brand { gap:8px; } .footer-brand .footer-mark { display:block; width:28px; height:28px; } .footer-brand .footer-wordmark { display:block; width:auto; height:20px; }
.main-nav { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:14px; } .main-nav a, .mobile-nav a { text-decoration:none; } .main-nav a:hover, .mobile-nav a:hover { color:var(--ink); } .nav-divider { width:1px; height:28px; background:var(--line); } .theme-control { position:relative; } .account-link { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; } .account-link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } button.icon-control { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:6px 9px; border-radius:7px; background:transparent !important; color:var(--muted) !important; box-shadow:none !important; font-weight:400 !important; } button.icon-control:hover { background:var(--soft) !important; color:var(--ink) !important; } .icon-control svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } .icon-control circle { fill:currentColor; stroke:none; } .theme-menu { position:absolute; right:0; top:calc(100% + 9px); z-index:50; min-width:164px; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); box-shadow:0 14px 30px rgba(0,0,0,.12); } .theme-menu button { display:block; width:100%; padding:9px 11px; border-radius:7px; background:transparent !important; color:var(--ink) !important; text-align:left; font-size:13px; font-weight:400 !important; } .theme-menu button[aria-checked="true"] { color:var(--violet) !important; font-weight:500 !important; } .theme-menu button:hover { background:var(--soft) !important; color:var(--ink) !important; } .theme-menu button[aria-checked="true"]:hover { color:var(--violet-dark) !important; }
.nav-dropdown { position:relative; } .nav-dropdown-trigger { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:7px 0 !important; background:transparent !important; color:var(--muted) !important; font-size:14px; font-weight:400 !important; } .nav-dropdown-trigger span { color:currentColor; font-size:15px; line-height:1; transform:translateY(-1px); } .nav-dropdown-trigger:hover, .nav-dropdown-trigger.is-active { color:var(--ink) !important; } .nav-dropdown-trigger.is-active { color:var(--violet) !important; } .nav-dropdown-menu { position:absolute; left:-10px; top:calc(100% + 9px); z-index:50; min-width:208px; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); box-shadow:0 14px 30px rgba(0,0,0,.12); } .nav-dropdown-menu a { display:block; padding:9px 11px; border-radius:7px; color:var(--ink); font-size:13px; } .nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="location"] { background:color-mix(in srgb, var(--ink) 6%, var(--surface-solid)); color:var(--violet-dark); } .main-nav > a.is-active, .mobile-nav > a.is-active { color:var(--violet); } .mobile-theme-row { display:none; } .menu-button, .mobile-nav { display:none; }
.quiet { padding:8px 10px; border-radius:9px; background:transparent; color:var(--muted); font-size:13px; } .quiet:hover { background:var(--soft); color:var(--ink); }
.mobile-nav .nav-dropdown { display:block; } .mobile-nav .nav-dropdown-trigger { width:100%; justify-content:space-between; padding:12px 0 !important; border-bottom:1px solid var(--line); text-align:left; } .mobile-nav .nav-dropdown-trigger[aria-expanded="true"] span { transform:rotate(180deg); } .mobile-nav .nav-dropdown-menu { position:static; min-width:0; padding:0 0 3px 14px; border:0; border-radius:0; background:transparent; box-shadow:none; } .mobile-nav .nav-dropdown-menu a { padding:10px 0; border-bottom:1px solid var(--line); } .mobile-nav .nav-dropdown-menu a:last-child { border-bottom:0; }
.main-nav { transition:opacity .28s ease, visibility 0s linear 0s; }
.autorun-nav-status { display:block; margin-left:auto; color:var(--muted); font-size:13px; font-weight:650; letter-spacing:.01em; opacity:0; visibility:hidden; transform:translateY(-2px); transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
.autorun-nav-status.is-visible { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.autorun-nav-status[hidden] { display:none; }
.topbar.is-autorun-active .main-nav { opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s, .28s; }
.topbar.is-autorun-active .menu-button { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility 0s linear .28s; }
.topbar.is-autorun-active .mobile-nav { display:none !important; }
.topbar.is-autorun-active .product-brand-lockup { pointer-events:none; }
.site-shell { max-width:1240px; margin:auto; padding:54px 28px 80px; } .page-view { min-height:calc(100vh - 220px); }
.site-shell:has(#marketing-page) { max-width:1600px; }
.hero-marketing { min-height:650px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr); align-items:center; gap:54px; padding:40px 0 74px; } .hero-copy { max-width:610px; } .eyebrow { margin:0 0 15px; color:var(--violet); font-size:11px; line-height:1.2; letter-spacing:.22em; font-weight:800; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(48px,7vw,94px); line-height:.94; letter-spacing:-.075em; } h1 em, .page-intro h1 em { color:var(--violet); font-style:normal; } h2 { margin-bottom:12px; font-size:clamp(24px,3vw,38px); line-height:1; letter-spacing:-.06em; } .lead { max-width:570px; margin-bottom:28px; color:var(--muted); font-size:19px; line-height:1.5; } .micro-copy { margin:14px 0 0; color:var(--muted); font-size:12px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .hero-copy .hero-actions, .download-card .hero-actions { justify-content:flex-start; } .button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:13px 20px; border-radius:999px; background:var(--violet); color:#fff; text-decoration:none; font-size:14px; font-weight:750; box-shadow:none; transition:transform .18s ease, background .18s ease; } .button span { font-size:19px; line-height:0; } .button:hover { background:var(--violet-dark); transform:translateY(-2px); } .button-secondary { background:rgba(255,255,255,.75); color:var(--ink); border:1px solid var(--line); box-shadow:none; } .button-secondary:hover { background:#fff; color:var(--violet-dark); } .button-light { background:#fff; color:var(--plum); box-shadow:none; } .button-light:hover { background:#eee9ff; } .full-width { width:100%; }
.hero-visual { min-width:0; } .hero-screenshot { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:18px; box-shadow:0 28px 90px rgba(53,33,100,.16); transform:rotate(2.4deg); transform-origin:center; }
.section-gap { margin-top:84px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .feature-grid.section-gap { margin-top:42px; } .feature-card, .card, .workflow-card, .pricing-card { border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.06); } .feature-card { min-height:0; padding:12px 25px; } .feature-icon { display:flex; align-items:center; width:28px; height:28px; margin-bottom:14px; color:var(--violet); } .feature-icon svg { display:block; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .feature-card h2 { margin-bottom:7px; font-size:22px; } .feature-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.45; }
.product-facts-section { padding:42px 0 0; border-top:1px solid var(--line); }
.product-facts-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.78fr); gap:70px; align-items:end; margin-bottom:30px; }
.product-facts-heading h2 { max-width:720px; margin:0; font-size:clamp(38px,5vw,66px); }
.product-facts-heading > p { max-width:520px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.product-facts-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:16px; }
.product-facts-list, .product-facts-output { margin:0; padding:26px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.06); }
.product-facts-list { display:grid; gap:0; }
.product-facts-list div { display:grid; grid-template-columns:120px 1fr; gap:22px; padding:15px 0; border-top:1px solid var(--line); }
.product-facts-list div:first-child { padding-top:0; border-top:0; }
.product-facts-list div:last-child { padding-bottom:0; }
.product-facts-list dt { color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.product-facts-list dd { margin:0; font-size:15px; line-height:1.45; }
.product-facts-output { display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,rgba(237,231,255,.9),rgba(255,255,255,.88)); }
.facts-flow { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:10px 0 18px; }
.facts-flow span { padding:8px 11px; border:1px solid rgba(99,55,255,.18); border-radius:999px; background:rgba(255,255,255,.72); color:var(--ink); font-size:12px; font-weight:750; }
.facts-flow b { color:var(--violet); }
.product-facts-output > p:not(.eyebrow) { max-width:440px; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.product-facts-output .text-link { margin-top:15px; }
.product-workflow-focus { display:grid; grid-template-columns:minmax(0,2.55fr) minmax(250px,1fr); gap:22px; align-items:stretch; }
.product-workflow-visual { display:flex; flex-direction:column; min-width:0; margin:0; padding:16px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.06); }
.product-workflow-visual img, .product-workflow-visual video { display:block; width:100%; height:auto; border-radius:15px; }
.product-workflow-visual figcaption { padding:13px 4px 2px; color:var(--muted); font-size:12px; line-height:1.4; }
.workflow-primary { justify-content:flex-start; padding:24px; background:var(--surface); }
.workflow-primary h3 { max-width:360px; margin:0 0 14px; font-size:clamp(28px,3vw,40px); line-height:1; letter-spacing:-.06em; }
.workflow-flow-vertical { margin:0 0 8px; }
.workflow-flow-vertical .flow-step { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:13px; padding:11px 0; border-top:1px solid var(--line); }
.workflow-flow-vertical .flow-step:last-child { border-bottom:1px solid var(--line); }
.flow-marker { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; color:var(--violet); font-size:10px; font-weight:800; }
.flow-step strong { display:block; font-size:14px; }
.flow-step small { color:var(--muted); font-size:13px; line-height:1.4; }
.workflow-cta { align-self:flex-start; min-height:0; margin-top:10px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface-solid); }
.workflow-cta:hover { border-color:rgba(99,55,255,.4); }
.process-section { margin-top:132px; }
.process-heading { max-width:620px; margin-bottom:38px; }
.process-heading h2 { margin:0; font-size:clamp(36px,5vw,62px); }
.process-heading h2 em { color:var(--violet); font-style:normal; }
.process-steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.process-step { display:grid; grid-template-columns:34px 1fr; gap:16px; padding:25px 28px 0 0; border-right:1px solid var(--line); }
.process-step + .process-step { padding-left:28px; }
.process-step:last-child { border-right:0; }
.process-number { color:var(--violet); font-size:11px; font-weight:800; letter-spacing:.08em; }
.process-step h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.04em; }
.process-step p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
[data-theme="dark"] .product-workflow-visual, [data-theme="dark"] .workflow-primary { background:var(--surface); }
@media (max-width:900px) {
  .product-workflow-focus { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .process-step, .process-step + .process-step { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }
  .process-step:last-child { border-bottom:0; }
}
@media (max-width:700px) {
  .product-facts-section { padding-top:28px; }
  .product-facts-heading { margin-bottom:28px; }
  .product-facts-heading h2 { font-size:44px; }
  .product-workflow-visual { padding:10px; }
  .workflow-primary { padding:24px; }
  .process-section { margin-top:92px; }
  .process-heading { margin-bottom:28px; }
}
.upcoming-heading { max-width:820px; margin-bottom:28px; } .upcoming-heading h2 { max-width:760px; margin:0 0 15px; font-size:clamp(38px,5vw,62px); } .upcoming-heading h2 em, .story-copy h2 em { color:var(--violet); font-style:normal; } .upcoming-heading > p:last-child { max-width:650px; margin:0; color:var(--muted); font-size:16px; line-height:1.55; } .upcoming-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .upcoming-card { min-height:0; padding:22px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.06); } .upcoming-card .feature-icon { margin-bottom:12px; } .upcoming-card h3 { max-width:430px; margin:0 0 8px; font-size:22px; line-height:1; letter-spacing:-.05em; } .upcoming-card p:not(.eyebrow) { max-width:530px; margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.own-ai-page { padding-bottom:120px; }
.own-ai-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:66px; align-items:center; min-height:620px; padding:36px 0 74px; }
.own-ai-hero-copy h1 { max-width:760px; margin-bottom:22px; font-size:clamp(48px,6vw,78px); }
.own-ai-hero-copy h1 em { color:var(--violet); font-style:normal; }
.own-ai-hero-copy .lead { max-width:640px; margin-bottom:28px; }
.own-ai-summary-card { position:relative; overflow:hidden; padding:0; border:1px solid rgba(188,168,255,.2); border-radius:26px; background:linear-gradient(145deg,#171425,#1f1729 54%,#35202d); color:#fff; box-shadow:0 28px 70px rgba(28,17,43,.28); isolation:isolate; transform:translateZ(0) rotate(1deg); }
.own-ai-summary-card::before { content:""; position:absolute; z-index:-1; width:230px; height:230px; top:-120px; right:-90px; border-radius:50%; background:rgba(99,55,255,.28); filter:blur(10px); opacity:.65; transform:scale(.8); transition:transform 1.4s cubic-bezier(.2,.8,.25,1), opacity .6s ease; }
.own-ai-summary-card.is-live::before { opacity:1; transform:scale(1.25); }
.own-ai-roles .eyebrow { color:#bca8ff; }
.own-ai-signal-head { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.12); background:#11131e; }
.own-ai-signal-brand, .own-ai-signal-state { display:flex; align-items:center; color:#bca8ff; font-size:9px; font-weight:800; letter-spacing:.15em; white-space:nowrap; }
.own-ai-signal-brand i { width:7px; height:7px; margin-right:9px; border-radius:50%; background:#7c5cff; box-shadow:0 0 0 5px rgba(124,92,255,.14); }
.own-ai-signal-state { color:rgba(255,255,255,.58); transition:color .3s ease; }
.own-ai-summary-card.is-ready .own-ai-signal-state { color:#9fe6bb; }
.own-ai-signal-stage { position:relative; min-height:210px; overflow:hidden; background:linear-gradient(135deg,rgba(99,55,255,.12),rgba(15,30,39,.46) 54%,rgba(126,62,56,.2)); }
.own-ai-signal-grid { position:absolute; inset:0; opacity:.32; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,#000,transparent); }
.own-ai-source-node, .own-ai-moment-node { position:absolute; z-index:2; display:grid; padding:13px 14px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(17,19,30,.88); box-shadow:0 16px 38px rgba(0,0,0,.22); }
.own-ai-source-node { top:25px; left:18px; width:126px; }
.own-ai-moment-node { right:18px; bottom:24px; width:128px; opacity:.32; transform:translateY(12px) scale(.94); transition:opacity .45s ease .5s, transform .65s cubic-bezier(.2,.8,.25,1) .42s; }
.own-ai-summary-card.is-live .own-ai-moment-node { opacity:1; transform:translateY(0) scale(1); }
.own-ai-source-node small, .own-ai-moment-node small, .own-ai-plan-strip small { color:#bca8ff; font-size:8px; font-weight:800; letter-spacing:.13em; }
.own-ai-source-node strong { margin:6px 0 3px; font-size:16px; letter-spacing:-.04em; }
.own-ai-source-node span { color:rgba(255,255,255,.48); font-size:9px; }
.own-ai-moment-node strong { margin:8px 0 2px; font-size:21px; line-height:.95; letter-spacing:-.04em; }
.own-ai-moment-node b { margin-top:6px; color:#9fe6bb; font-size:8px; letter-spacing:.12em; }
.own-ai-signal-path { position:absolute; z-index:1; width:calc(100% - 288px); height:2px; top:98px; left:144px; overflow:visible; background:linear-gradient(90deg,rgba(188,168,255,.15),#8c71ff,rgba(159,230,187,.34)); box-shadow:0 0 16px rgba(140,113,255,.55); transform:rotate(14deg); transform-origin:left center; }
.own-ai-signal-path i { position:absolute; width:6px; height:6px; top:-2px; left:0; border-radius:50%; background:#c5b6ff; box-shadow:0 0 12px #8c71ff; opacity:0; }
.own-ai-summary-card.is-live .own-ai-signal-path i { animation:own-ai-packet 1.35s ease-in-out forwards; }
.own-ai-summary-card.is-live .own-ai-signal-path i:nth-child(2) { animation-delay:.32s; }
.own-ai-summary-card.is-live .own-ai-signal-path i:nth-child(3) { animation-delay:.64s; }
@keyframes own-ai-packet { 0% { left:0; opacity:0; transform:scale(.7); } 18%,78% { opacity:1; } 100% { left:calc(100% - 6px); opacity:0; transform:scale(1.15); } }
.own-ai-output-stack { position:absolute; left:21px; bottom:22px; display:flex; align-items:flex-end; gap:6px; }
.own-ai-output-stack i { display:block; width:23px; height:39px; border:1px solid rgba(255,255,255,.35); border-radius:6px; background:linear-gradient(160deg,rgba(99,55,255,.54),rgba(213,125,86,.3)); box-shadow:inset 0 0 0 3px rgba(17,19,30,.32); opacity:0; transform:translateY(18px) rotate(-7deg); transition:opacity .35s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
.own-ai-output-stack i:nth-child(2) { height:47px; transform:translateY(18px); transition-delay:.18s; }
.own-ai-output-stack i:nth-child(3) { height:42px; transform:translateY(18px) rotate(7deg); transition-delay:.34s; }
.own-ai-summary-card.is-ready .own-ai-output-stack i { opacity:1; transform:translateY(0) rotate(-7deg); }
.own-ai-summary-card.is-ready .own-ai-output-stack i:nth-child(2) { transform:translateY(0); }
.own-ai-summary-card.is-ready .own-ai-output-stack i:nth-child(3) { transform:translateY(0) rotate(7deg); }
.own-ai-plan-strip { display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; padding:19px 18px 17px; border-top:1px solid rgba(255,255,255,.12); background:rgba(15,14,23,.7); }
.own-ai-plan-strip > div { display:grid; align-content:start; }
.own-ai-plan-strip > div + div { padding-left:16px; border-left:1px solid rgba(255,255,255,.14); }
.own-ai-plan-strip > div:first-child strong { margin-top:6px; font-size:21px; letter-spacing:-.055em; white-space:nowrap; }
.own-ai-plan-strip > div:last-child strong { font-size:15px; letter-spacing:-.035em; }
.own-ai-plan-strip span { margin-top:5px; color:rgba(255,255,255,.55); font-size:9px; line-height:1.35; }
.own-ai-plan-footnote { display:block; padding:13px 18px 15px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.48); font-size:10px; line-height:1.45; }
@media (prefers-reduced-motion: reduce) { .own-ai-summary-card::before, .own-ai-moment-node, .own-ai-output-stack i { transition:none; } .own-ai-summary-card.is-live .own-ai-signal-path i, .own-ai-capacity-number::after, .own-ai-cinema-mark i { animation:none; } }
.own-ai-workflow, .own-ai-providers, .own-ai-comparison, .own-ai-requirements, .own-ai-faq { max-width:1080px; margin-right:auto; margin-left:auto; }
.own-ai-section-heading { max-width:760px; margin-bottom:30px; }
.own-ai-section-heading h2, .own-ai-roles h2, .own-ai-capacity h2 { margin:0; font-size:clamp(38px,5vw,60px); }
.own-ai-section-heading > p:last-child, .own-ai-roles-heading > p:last-child { max-width:680px; margin:16px 0 0; color:var(--muted); font-size:16px; line-height:1.6; }
.own-ai-step-grid, .own-ai-requirement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.own-ai-step-grid article, .own-ai-requirement-grid article { min-height:245px; padding:28px; }
.own-ai-step-grid article + article, .own-ai-requirement-grid article + article { border-left:1px solid var(--line); }
.own-ai-step-grid article > span, .own-ai-requirement-grid article > span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--soft); color:var(--violet-dark); font-size:11px; font-weight:800; }
.own-ai-step-grid h3, .own-ai-requirement-grid h3 { margin:32px 0 9px; font-size:24px; letter-spacing:-.05em; }
.own-ai-step-grid p, .own-ai-requirement-grid p { max-width:285px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.own-ai-step-grid code { padding:2px 5px; border-radius:5px; background:var(--soft); color:var(--ink); font-size:.9em; }
.own-ai-provider-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.own-ai-provider-grid article { min-height:132px; padding:24px 28px; border:1px solid var(--line); border-radius:22px; background:var(--surface-solid); }
.own-ai-provider-grid span { display:block; color:var(--violet); font-size:10px; font-weight:800; letter-spacing:.16em; }
.own-ai-provider-grid h3 { margin:24px 0 0; font-size:30px; letter-spacing:-.05em; }
.own-ai-provider-grid p { max-width:240px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.own-ai-provider-note { margin:16px 2px 0; color:var(--muted); font-size:12px; line-height:1.55; }
.own-ai-roles { display:grid; grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr); gap:56px; align-items:center; padding:56px; border-radius:30px; background:linear-gradient(115deg,#21162a,#172c31 55%,#6d3b34); color:#fff; }
.own-ai-roles-heading > p:last-child { color:rgba(255,255,255,.68); }
.own-ai-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(255,255,255,.16); }
.own-ai-role-grid article { min-height:164px; padding:22px; background:rgba(20,17,28,.5); }
.own-ai-role-grid span { color:#bca8ff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.own-ai-role-grid h3 { margin:30px 0 7px; font-size:19px; letter-spacing:-.04em; }
.own-ai-role-grid p { margin:0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.48; }
.own-ai-capacity { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:48px; align-items:center; max-width:1080px; margin-right:auto; margin-left:auto; padding:44px; border:1px solid var(--line); border-radius:28px; background:var(--surface); }
.own-ai-capacity-number { isolation:isolate; position:relative; display:grid; min-height:320px; place-content:center; justify-items:center; overflow:hidden; padding:42px 32px; border:1px solid rgba(188,168,255,.24); border-radius:24px; background:radial-gradient(circle at 50% 42%,rgba(119,84,255,.32),transparent 36%),linear-gradient(145deg,#0b0d17 4%,#18152b 54%,#351d35 100%); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -70px 90px rgba(0,0,0,.25),0 24px 55px rgba(31,19,57,.2); text-align:center; }
.own-ai-capacity-number::before { content:""; position:absolute; z-index:-1; inset:16px; border:1px solid rgba(255,255,255,.1); border-radius:17px; box-shadow:inset 0 0 46px rgba(127,91,255,.08); }
.own-ai-capacity-number::after { content:""; position:absolute; z-index:-1; top:-40%; left:-48%; width:34%; height:180%; background:linear-gradient(90deg,transparent,rgba(223,214,255,.16),transparent); filter:blur(2px); transform:skewX(-16deg); animation:own-ai-cinema-sweep 6s ease-in-out infinite; }
.own-ai-cinema-mark { position:absolute; z-index:-1; inset:40px 24px; display:flex; justify-content:space-between; margin:0; pointer-events:none; }
.own-ai-cinema-mark i { display:block; width:25%; border:1px solid rgba(188,168,255,.24); background:linear-gradient(90deg,rgba(99,55,255,.45),rgba(99,55,255,.04)); box-shadow:0 0 42px rgba(99,55,255,.2); clip-path:polygon(0 0,100% 20%,100% 80%,0 100%); animation:own-ai-cinema-breathe 4.8s ease-in-out infinite; }
.own-ai-cinema-mark i:last-child { background:linear-gradient(270deg,rgba(213,125,86,.38),rgba(213,125,86,.03)); box-shadow:0 0 42px rgba(213,125,86,.18); clip-path:polygon(0 20%,100% 0,100% 100%,0 80%); animation-delay:-2.4s; }
.own-ai-capacity-number strong { position:relative; z-index:1; font-size:clamp(76px,9vw,116px); line-height:.82; letter-spacing:-.08em; text-shadow:0 5px 28px rgba(0,0,0,.38); }
.own-ai-capacity-number .own-ai-capacity-unit { position:relative; z-index:1; margin-top:21px; color:#d6ccff; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
@keyframes own-ai-cinema-sweep { 0%,14% { left:-48%; opacity:0; } 28% { opacity:1; } 54%,100% { left:114%; opacity:0; } }
@keyframes own-ai-cinema-breathe { 0%,100% { opacity:.55; transform:scaleY(.94); } 50% { opacity:1; transform:scaleY(1); } }
.own-ai-capacity > div:last-child > p:not(.eyebrow) { max-width:620px; margin:16px 0 14px; color:var(--muted); font-size:16px; line-height:1.55; }
.own-ai-capacity small, .own-ai-comparison-footnote { color:var(--muted); font-size:12px; line-height:1.55; }
.own-ai-comparison-wrap { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.own-ai-comparison table { width:100%; border-collapse:collapse; text-align:left; }
.own-ai-comparison th, .own-ai-comparison td { padding:18px 22px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.45; vertical-align:top; }
.own-ai-comparison thead th { color:var(--muted); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.own-ai-comparison tbody th { width:28%; font-size:14px; }
.own-ai-comparison tbody td { width:36%; color:var(--muted); }
.own-ai-comparison tbody td:last-child { color:var(--ink); font-weight:700; }
.own-ai-comparison tbody tr:last-child th, .own-ai-comparison tbody tr:last-child td { border-bottom:0; }
.own-ai-comparison-footnote { margin:13px 2px 0; }
.own-ai-comparison-guidance { max-width:760px; margin:25px 0 0; font-size:17px; line-height:1.55; }
.own-ai-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:0; padding:0; border:1px solid var(--line); border-radius:24px; background:var(--surface); list-style:none; }
.own-ai-flow li { position:relative; min-height:150px; padding:24px 20px; }
.own-ai-flow li + li { border-left:1px solid var(--line); }
.own-ai-flow li:not(:last-child)::after { content:'→'; position:absolute; z-index:1; top:50%; right:-13px; display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; background:var(--surface-solid); color:var(--violet); font-size:13px; transform:translateY(-50%); }
.own-ai-flow span { display:block; margin-bottom:36px; color:var(--violet); font-size:10px; font-weight:800; letter-spacing:.12em; }
.own-ai-flow strong { display:block; font-size:15px; line-height:1.35; }
.own-ai-faq .own-ai-section-heading { margin-bottom:12px; }
.own-ai-faq .clips-faq-list { max-width:none; }
@media (max-width:900px) { body[data-seo-page="use-your-own-ai"] .main-nav { display:none; } body[data-seo-page="use-your-own-ai"] .menu-button { display:block; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-solid); color:var(--ink); font-size:13px; } body[data-seo-page="use-your-own-ai"] .mobile-nav { display:grid; max-height:0; overflow:hidden; gap:0; padding:0 18px; background:var(--header-bg); transition:max-height .2s ease, padding .2s ease; } body[data-seo-page="use-your-own-ai"] .mobile-nav.open { max-height:680px; padding:8px 18px 18px; } body[data-seo-page="use-your-own-ai"] .mobile-nav a { padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; } body[data-seo-page="use-your-own-ai"] .mobile-nav .account-link { gap:9px; } body[data-seo-page="use-your-own-ai"] .mobile-nav .account-link svg { width:18px; height:18px; } body[data-seo-page="use-your-own-ai"] .mobile-theme-row { position:relative; display:flex; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } body[data-seo-page="use-your-own-ai"] .mobile-theme-row .theme-menu { position:static; margin-left:8px; } body[data-seo-page="use-your-own-ai"] .mobile-theme-row .icon-control { padding-left:0; } .own-ai-hero { grid-template-columns:1fr; gap:34px; } .own-ai-summary-card { width:100%; max-width:720px; margin:0 auto; } .own-ai-roles { grid-template-columns:1fr; gap:36px; padding:44px; } .own-ai-capacity { grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr); gap:34px; padding:34px; } .own-ai-flow { grid-template-columns:1fr; overflow:hidden; } .own-ai-flow li { min-height:0; padding:20px 24px; } .own-ai-flow li + li { border-top:1px solid var(--line); border-left:0; } .own-ai-flow li:not(:last-child)::after { content:'↓'; top:auto; right:24px; bottom:-13px; transform:none; } .own-ai-flow span { margin-bottom:12px; } }
@media (max-width:700px) { .own-ai-page { padding-bottom:78px; } .own-ai-hero { min-height:0; gap:32px; padding:24px 0 42px; } .own-ai-hero-copy h1 { font-size:clamp(43px,13vw,62px); } .own-ai-summary-card { padding:0; transform:none; } .own-ai-step-grid, .own-ai-provider-grid, .own-ai-requirement-grid, .own-ai-role-grid { grid-template-columns:1fr; } .own-ai-step-grid article, .own-ai-requirement-grid article, .own-ai-role-grid article { min-height:0; padding:24px; } .own-ai-provider-grid article { min-height:116px; padding:20px 24px; } .own-ai-provider-grid h3 { margin-top:18px; } .own-ai-step-grid article + article, .own-ai-requirement-grid article + article { border-top:1px solid var(--line); border-left:0; } .own-ai-step-grid h3, .own-ai-requirement-grid h3, .own-ai-role-grid h3 { margin-top:22px; } .own-ai-roles { padding:36px 24px 24px; } .own-ai-capacity { grid-template-columns:1fr; padding:24px; } .own-ai-capacity-number { min-height:270px; padding:30px 20px; } .own-ai-cinema-mark { inset:32px 20px; } .own-ai-comparison-wrap { overflow:visible; border:0; background:transparent; } .own-ai-comparison thead { display:none; } .own-ai-comparison tbody { display:grid; gap:10px; } .own-ai-comparison tr { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .own-ai-comparison tbody th { grid-column:1 / -1; width:auto; padding:13px 16px; background:var(--soft); } .own-ai-comparison tbody td { width:auto; padding:14px 16px; border-bottom:0; } .own-ai-comparison tbody td + td { border-left:1px solid var(--line); } .own-ai-comparison tbody td::before { content:attr(data-label); display:block; margin-bottom:5px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .own-ai-comparison-guidance { font-size:16px; } .own-ai-flow li { padding:18px 20px; } }
.story-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .story-copy { max-width:500px; } .story-copy h2 { font-size:clamp(38px,5vw,64px); line-height:.98; } .story-copy > p:last-child { color:var(--muted); font-size:17px; line-height:1.6; } .workflow-card { padding:30px; } .workflow-card h2 { margin-bottom:28px; font-size:30px; } .workflow-step { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); } .workflow-step b { color:var(--violet); font-size:13px; } .workflow-step strong, .workflow-step small { display:block; } .workflow-step strong { margin-bottom:5px; font-size:15px; } .workflow-step small { color:var(--muted); font-size:13px; line-height:1.4; }
.dark-banner { overflow:hidden; position:relative; padding:72px 8%; border-radius:30px; background:linear-gradient(115deg,#21162a,#172c31 55%,#6d3b34); color:#fff; text-align:center; } .dark-banner::after { content:""; position:absolute; width:340px; height:340px; right:2%; top:-150px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.03); } .dark-banner .eyebrow { color:#bca8ff; } .dark-banner h2 { position:relative; z-index:1; max-width:700px; margin:0 auto 13px; font-size:clamp(42px,6vw,74px); } .dark-banner p:not(.eyebrow) { position:relative; z-index:1; color:rgba(255,255,255,.7); } .dark-banner .button { position:relative; z-index:1; margin-top:20px; }
.dark-banner.home-product-banner { border:1px solid var(--line); background-color:#f3ebdd; background-image:url('/assets/home-foundation-banner-v2-clean-monitor.png'); background-position:center; background-size:cover; box-shadow:0 26px 90px rgba(53,33,100,.08); color:var(--ink); }
.dark-banner.home-product-banner::after { display:none; }
.dark-banner.home-product-banner .eyebrow { color:var(--violet-dark); }
.dark-banner.home-product-banner .home-product-banner-copy { position:relative; z-index:1; display:table; width:fit-content; max-width:calc(100% - 16px); margin:0 auto; padding:8px 14px 11px; border:1px solid rgba(23,24,27,.08); border-radius:15px; background-color:rgba(250,249,246,.96); background-image:radial-gradient(circle,rgba(23,24,27,.15) 1px,transparent 1.2px); background-size:15px 15px; box-shadow:0 10px 30px rgba(53,33,100,.06); }
.dark-banner.home-product-banner .home-product-banner-copy p { margin-bottom:0; }
.dark-banner.home-product-banner p:not(.eyebrow) { color:var(--muted); }
.dark-banner.home-product-banner .button { background:var(--ink); color:#fff; }
.dark-banner.home-product-banner .button:hover { background:var(--violet-dark); }
.page-intro { max-width:690px; padding:45px 0 64px; } .page-intro h1 { font-size:clamp(48px,7vw,86px); } .pricing-intro { max-width:760px; margin:0 auto; text-align:center; } .pricing-intro .lead { margin-right:auto; margin-left:auto; } .pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:1120px; margin:0 auto; align-items:stretch; } .plan-card { display:flex; flex-direction:column; min-height:590px; padding:30px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.06); } .plan-card-local { background:#eeeeec; border-color:#d5d5d0; box-shadow:none; } .plan-card-featured { border:2px solid var(--violet); background:linear-gradient(145deg,rgba(237,231,255,.92),rgba(255,255,255,.9)); box-shadow:none; } .plan-card-heading { height:auto; min-height:170px; } .plan-card-heading h2 { margin-bottom:12px; font-size:clamp(30px,4vw,46px); } .plan-card-heading > p:last-child { color:var(--muted); line-height:1.5; } .plan-label-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .plan-label-row .eyebrow { margin-bottom:15px; } .plan-badge { padding:6px 9px; border-radius:999px; background:var(--soft); color:var(--violet-dark); font-size:10px; font-weight:800; letter-spacing:.08em; white-space:nowrap; } .plan-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; min-height:82px; margin:12px 0 22px; padding-top:18px; border-top:1px solid var(--line); } .plan-price strong { font-size:38px; letter-spacing:-.06em; } .plan-price span { color:var(--muted); font-size:15px; } .plan-price small { flex-basis:100%; color:var(--muted); font-size:13px; } .plan-card .button { margin-top:0; } .plan-divider { height:1px; margin:28px 0 20px; background:var(--line); } .plan-includes { margin-bottom:12px; color:var(--muted); font-size:13px; font-weight:700; } .plan-features { display:grid; gap:11px; padding:0; margin:0; list-style:none; } .plan-features li { position:relative; padding-left:22px; color:var(--ink); font-size:14px; line-height:1.4; } .plan-features li::before { content:"✓"; position:absolute; left:0; color:var(--violet); font-weight:800; } .shop-layout { display:grid; grid-template-columns:1fr 420px; gap:70px; align-items:start; } .shop-benefits { padding:34px 0; } .shop-benefits h2 { margin-bottom:32px; font-size:clamp(38px,5vw,62px); } .shop-benefits ul { display:grid; gap:0; max-width:580px; padding:0; margin:0; list-style:none; } .shop-benefits li { display:flex; gap:18px; padding:21px 0; border-top:1px solid var(--line); } .shop-benefits li > span { color:var(--violet); font-size:23px; } .shop-benefits strong, .shop-benefits small { display:block; } .shop-benefits strong { margin-bottom:5px; font-size:16px; } .shop-benefits small { color:var(--muted); font-size:14px; line-height:1.4; } .pricing-card { padding:30px; } .shop-app-icon { display:block; width:76px; height:76px; margin:0 0 24px; border-radius:18px; object-fit:cover; box-shadow:0 14px 28px rgba(53,33,100,.16); } .pricing-card h2 { font-size:34px; } .pricing-copy { min-height:48px; color:var(--muted); line-height:1.5; } .price-placeholder { margin:25px 0; padding:16px; border-radius:14px; background:#f7f5fc; color:var(--violet-dark); font-size:13px; font-weight:700; }
.clips-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:66px; align-items:center; min-height:620px; padding:36px 0 74px; } .clips-hero-copy { max-width:670px; } .clips-hero-copy h1 { max-width:670px; } .clips-hero-copy .lead { max-width:620px; } .clips-hero-panel { overflow:hidden; border:1px solid rgba(99,55,255,.18); border-radius:28px; background:linear-gradient(145deg,#24152e,#182c34 72%,#71413e); color:#fff; box-shadow:0 24px 80px rgba(53,33,100,.18); transform:rotate(1.2deg); } .clips-panel-top { display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); font-size:10px; font-weight:800; letter-spacing:.18em; } .clips-panel-top strong { margin-left:auto; color:#bca8ff; font-size:9px; letter-spacing:.12em; } .clips-status-dot { width:7px; height:7px; border-radius:50%; background:#91e4b5; box-shadow:0 0 0 5px rgba(145,228,181,.14); } .clips-panel-wave { display:flex; align-items:center; justify-content:center; gap:6px; min-height:190px; padding:38px 26px; background:linear-gradient(90deg,rgba(99,55,255,.2),rgba(255,255,255,.04),rgba(213,125,86,.18)); } .clips-panel-wave i { display:block; width:5px; height:var(--wave-height,42px); border-radius:99px; background:linear-gradient(#bca8ff,#f0c7a9); opacity:.9; } .clips-panel-wave i:nth-child(2n) { --wave-height:78px; } .clips-panel-wave i:nth-child(3n) { --wave-height:116px; } .clips-panel-wave i:nth-child(5n) { --wave-height:62px; } .clips-panel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.12); } .clips-panel-grid > div { display:grid; gap:7px; padding:20px 18px; background:rgba(21,19,31,.28); } .clips-panel-grid small { color:#bca8ff; font-size:9px; font-weight:800; letter-spacing:.14em; } .clips-panel-grid b { font-size:18px; letter-spacing:-.04em; } .clips-panel-grid span { color:rgba(255,255,255,.58); font-size:11px; } .clips-panel-footer { display:flex; justify-content:space-between; gap:20px; padding:20px 22px; color:rgba(255,255,255,.68); font-size:13px; } .clips-panel-footer strong { color:#fff; } .clips-business-strip { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:70px; align-items:end; margin-top:30px; padding:42px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .clips-business-strip h2 { max-width:490px; margin:0; font-size:clamp(32px,4vw,54px); } .clips-business-strip > p { max-width:620px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; } .clips-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:84px; } .clips-proof-card { min-height:270px; padding:26px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.06); } .clips-proof-card .feature-icon { margin-bottom:28px; } .clips-proof-card h2 { font-size:30px; } .clips-proof-card p:not(.eyebrow) { min-height:0; margin:0; color:var(--muted); line-height:1.5; } .clips-section-heading { max-width:760px; margin:110px 0 30px; } .clips-section-heading h2 { margin-bottom:15px; font-size:clamp(36px,5vw,60px); } .clips-section-heading > p:last-child { max-width:660px; margin:0; color:var(--muted); font-size:16px; line-height:1.55; } .clips-compare-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.78); box-shadow:0 18px 70px rgba(53,33,100,.06); } .clips-compare-table { width:100%; min-width:1040px; border-collapse:collapse; text-align:left; } .clips-compare-table th, .clips-compare-table td { padding:20px 18px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px; line-height:1.45; } .clips-compare-table thead th { color:var(--muted); font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .clips-compare-table tbody tr:last-child th, .clips-compare-table tbody tr:last-child td { border-bottom:0; } .clips-compare-table tbody th { width:19%; font-size:15px; } .clips-compare-table tbody th a { color:var(--ink); text-decoration:none; } .clips-compare-table tbody th a:hover { color:var(--violet); } .clips-compare-table tbody th small, .clips-compare-table td small { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:500; } .clips-compare-table td { color:var(--muted); } .clips-compare-table td strong { color:var(--ink); font-size:15px; } .clips-row-poeysia { background:linear-gradient(90deg,rgba(237,231,255,.72),rgba(255,255,255,.36)); } .clips-row-poeysia th strong { color:var(--violet-dark); } .clips-reality-check { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:60px; align-items:center; margin-top:110px; padding:54px 7%; border-radius:30px; background:linear-gradient(115deg,#21162a,#172c31 55%,#6d3b34); color:#fff; } .clips-reality-check h2 { max-width:720px; margin-bottom:18px; font-size:clamp(34px,5vw,60px); } .clips-reality-check p:not(.eyebrow) { max-width:680px; margin:0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.6; } .clips-reality-check .eyebrow { color:#bca8ff; } .clips-math-card { padding:24px; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:rgba(255,255,255,.08); } .clips-math-card span { display:block; color:rgba(255,255,255,.65); font-size:12px; } .clips-math-card strong { display:block; margin:4px 0; font-size:38px; letter-spacing:-.06em; } .clips-math-card hr { border:0; border-top:1px solid rgba(255,255,255,.18); margin:20px 0; } .clips-scorecard { margin-top:110px; } .clips-scorecard .clips-section-heading { margin:0 0 30px; } .clips-score-grid { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.78); } .clips-score-grid > div { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding:18px 22px; border-bottom:1px solid var(--line); } .clips-score-grid > div:last-child { border-bottom:0; } .clips-score-grid > div:first-child { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .clips-score-grid span { font-size:14px; font-weight:700; } .clips-score-grid b { color:var(--muted); font-size:13px; line-height:1.4; } .clips-score-grid .score-good { color:var(--violet-dark); } .clips-score-grid .score-poeysia-label { color:var(--violet-dark); } .clips-cta { margin-top:110px; padding:76px 9%; border-radius:30px; background:var(--violet); color:#fff; text-align:center; } .clips-cta .eyebrow { color:#cfc4ff; } .clips-cta h2 { max-width:780px; margin:0 auto 14px; font-size:clamp(40px,6vw,74px); } .clips-cta p:not(.eyebrow) { max-width:620px; margin:0 auto; color:rgba(255,255,255,.78); font-size:17px; line-height:1.55; } .clips-cta .hero-actions { justify-content:center; margin-top:26px; } .clips-cta-secondary { background:#24152e; color:#fff; } .clips-cta-secondary:hover { background:#140c1b; }
.download-card { display:grid; grid-template-columns:1fr 300px; gap:70px; align-items:center; min-height:520px; padding:68px 8%; border:1px solid var(--line); border-radius:31px; background:linear-gradient(115deg,rgba(235,229,255,.9),rgba(255,255,255,.92) 52%,rgba(255,243,227,.78)); box-shadow:0 24px 80px rgba(53,33,100,.08); } .download-card h1, .download-card h2 { max-width:660px; margin-bottom:24px; font-size:clamp(48px,7vw,94px); line-height:.94; letter-spacing:-.075em; } .download-spec { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; padding:30px; border:1px solid rgba(99,55,255,.16); border-radius:25px; background:rgba(255,255,255,.63); text-align:center; } .download-app-icon { display:block; width:96px; height:96px; margin:0 auto 24px; border-radius:22px; object-fit:cover; box-shadow:0 16px 30px rgba(53,33,100,.18); } .download-spec .eyebrow { margin-bottom:10px; } .download-spec strong { margin-bottom:8px; font-size:19px; } .download-spec > span:last-child { color:var(--muted); font-size:13px; } .download-note { display:flex; justify-content:center; gap:9px; margin-top:26px; color:var(--muted); font-size:13px; } .download-note strong { color:var(--ink); }
.account-intro { padding-bottom:38px; } .account-intro h1 { max-width:700px; } .card { padding:28px; } .auth-card { max-width:580px; margin-bottom:20px; } .auth-card h2 { font-size:30px; } .auth-card p:not(.eyebrow), .checkout-card p:not(.eyebrow):not(.fine-print), .retention p:not(.eyebrow) { color:var(--muted); line-height:1.5; } .form { display:grid; gap:9px; margin-top:24px; } label { font-size:13px; font-weight:700; } input { width:100%; border:1px solid #d9d5df; border-radius:12px; background:white; padding:13px 14px; outline:none; } input:focus { border-color:var(--violet); box-shadow:0 0 0 3px #e9e3ff; } button:not(.quiet):not(.menu-button):not(.clips-faq-question) { padding:12px 16px; border-radius:12px; background:var(--violet); color:white; font-weight:700; } button:not(.quiet):not(.menu-button):not(.clips-faq-question):hover { background:var(--violet-dark); } button:disabled { opacity:.55; cursor:wait; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .card-heading { display:flex; justify-content:space-between; gap:16px; align-items:start; } .card-heading h2 { overflow-wrap:anywhere; font-size:22px; } .pill { background:var(--soft); color:var(--violet-dark); border-radius:999px; padding:7px 10px; font-size:12px; font-weight:750; white-space:nowrap; } .pill[data-tone="warning"] { background:#fff5de; color:#8d651c; } .pill[data-tone="danger"] { background:#ffe9ee; color:var(--danger); } .plan-summary { display:grid; gap:5px; margin:26px 0; padding:18px; border-radius:16px; background:#f8f6fb; } .plan-summary span { color:var(--muted); font-size:13px; } .plan-summary strong { font-size:21px; } .facts { display:grid; gap:13px; margin:0 0 25px; } .facts div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding-bottom:12px; } dt,dd { margin:0; font-size:14px; } dt { color:var(--muted); } dd { text-align:right; font-weight:650; } .checkout-host { min-height:160px; margin:22px 0 14px; border:1px dashed #cbc4e5; border-radius:16px; padding:16px; } .checkout-host:empty { display:none; } .fine-print { color:var(--muted); font-size:11px; line-height:1.4; margin:14px 0 0; } .actions { display:flex; flex-wrap:wrap; gap:10px; } .secondary { background:#eeeaf7 !important; color:var(--violet-dark) !important; } .secondary:hover { background:#e2dcf4 !important; } .danger { background:#fff0f2 !important; color:var(--danger) !important; } .danger:hover { background:#ffe0e6 !important; } .retention { margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .retention h2 { font-size:23px; }
.status, .notice { min-height:20px; color:var(--muted); font-size:13px; } .status[data-tone="error"], .notice[data-tone="error"] { color:var(--danger); } .status[data-tone="success"], .notice[data-tone="success"] { color:#3b785d; } .muted { color:var(--muted); font-size:14px; } #global-notice { margin:26px 0 0; }
footer { border-top:1px solid var(--line); background:rgba(255,255,255,.6); } .footer-inner { max-width:1240px; margin:auto; padding:48px 24px; display:flex; justify-content:space-between; gap:50px; } footer p { margin-top:12px; color:var(--muted); font-size:14px; } .footer-links { display:flex; gap:52px; } .footer-links div { display:grid; align-content:start; gap:10px; min-width:100px; max-width:170px; } .footer-links strong { margin-bottom:4px; color:var(--muted); font-size:11px; letter-spacing:.16em; } .footer-links a { color:var(--muted); font-size:13px; line-height:1.35; text-decoration:none; } .footer-links a:hover { color:var(--ink); } .footer-bottom { max-width:1184px; margin:auto; padding:20px 0 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.footer-ai-note { max-width:1184px; margin:0 auto !important; padding:0 0 22px; color:color-mix(in srgb,var(--muted) 72%,transparent); font-size:10px; letter-spacing:.01em; text-align:center; }
@media (max-width:700px) { .footer-ai-note { padding:0 18px 20px; line-height:1.5; } }
@media (max-width:900px) { .hero-marketing { grid-template-columns:1fr; gap:30px; } .hero-copy { max-width:700px; } .hero-visual { max-width:740px; width:100%; margin:0 auto; } .story-section { gap:35px; } .product-facts-heading { grid-template-columns:1fr; gap:22px; } .product-facts-grid { grid-template-columns:1fr; } .shop-layout, .download-card { gap:35px; } .footer-links { gap:35px; } }
@media (max-width:700px) { .topbar-inner { min-height:48px; padding:0 18px; } .main-nav { display:none; } .menu-button { display:block; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-solid); color:var(--ink); font-size:13px; } .mobile-nav { max-height:0; overflow:hidden; padding:0 18px; display:grid; gap:0; background:var(--header-bg); transition:max-height .2s ease, padding .2s ease; } .mobile-nav.open { max-height:520px; padding:8px 18px 18px; } .mobile-nav a { padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; } .mobile-nav .account-link { gap:9px; } .mobile-nav .account-link svg { width:18px; height:18px; } .product-brand-lockup img { width:24px; height:24px; margin-right:8px; } .product-brand-name { font-size:21px; } .product-brand-pro { top:-.4em; margin-left:3px; font-size:10px; } .mobile-theme-row { position:relative; display:flex; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .mobile-theme-row .theme-menu { position:static; margin-left:8px; } .mobile-theme-row .icon-control { padding-left:0; } .site-shell { padding:32px 18px 58px; } .hero-marketing { min-height:0; padding:24px 0 40px; } h1 { font-size:clamp(48px,15vw,74px); } .lead { font-size:17px; } .feature-grid, .story-section, .account-grid, .pricing-grid, .shop-layout, .download-card { grid-template-columns:1fr; } .product-facts-section { padding-top:27px; } .product-facts-list, .product-facts-output { padding:22px; } .product-facts-list div { grid-template-columns:1fr; gap:6px; } .product-facts-heading h2 { font-size:44px; } .section-gap { margin-top:54px; } .feature-card { min-height:0; } .plan-card { min-height:0; padding:24px; } .plan-card-heading { height:auto; min-height:0; } .story-copy h2 { font-size:44px; } .visual-grid { grid-template-columns:84px 1fr; } .visual-sidebar { padding:18px 10px; font-size:9px; } .visual-canvas { padding:18px 12px; } .canvas-card-main { grid-template-columns:1fr; gap:10px; } .canvas-card-main .canvas-art { min-height:100px; } .download-card { min-height:0; padding:38px 24px; } .download-spec { min-height:220px; } .download-note { display:block; text-align:center; line-height:1.6; } .shop-benefits { padding:0; } .page-intro { padding:24px 0 38px; } .footer-inner { display:block; padding:40px 18px; } .footer-links { display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; margin-top:38px; } .footer-links div { max-width:none; } .footer-bottom { display:block; margin:0 18px; padding:18px 0 23px; line-height:1.8; } .footer-bottom span { display:block; } .retention { display:block; } .retention .actions { margin-top:20px; } }

[data-theme="dark"] body::before { background:none; }

.auth-layout { display:grid; grid-template-columns:minmax(0,580px) minmax(0,1fr); gap:20px; align-items:stretch; max-width:1120px; }
.auth-layout .auth-card { max-width:none; margin-bottom:0; }
.checkout-preview { display:flex; flex-direction:column; justify-content:center; min-height:100%; background:linear-gradient(145deg,rgba(237,231,255,.9),rgba(255,255,255,.92)); }
.checkout-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:24px 0 0; }
.checkout-preview-heading h2 { margin:0 0 9px; font-size:clamp(28px,3vw,40px); }
.checkout-preview-heading p { margin:0; color:var(--muted); line-height:1.5; }
.checkout-preview-price { flex:0 0 auto; text-align:right; }
.checkout-preview-price strong { display:block; font-size:30px; letter-spacing:-.05em; }
.checkout-preview-price span { color:var(--muted); font-size:13px; }
.checkout-preview-rule { height:1px; margin:28px 0 20px; background:var(--line); }
.checkout-preview-note { max-width:420px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.account-grid.account-only { grid-template-columns:minmax(0,760px); max-width:760px; }
.account-management { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; max-width:1120px; margin-top:20px; }
.management-card h2, .support-card h2 { margin-bottom:12px; font-size:clamp(26px,3vw,38px); }
.management-card > p:not(.eyebrow), .support-card > p:not(.eyebrow) { max-width:610px; color:var(--muted); line-height:1.55; }
.management-actions, .support-actions { margin-top:24px; }
.account-note { margin:18px 0 0; padding:13px 15px; border-radius:12px; background:#eeeaf7; color:var(--violet-dark); font-size:13px; line-height:1.5; }
.text-link { display:inline-flex; align-items:center; gap:8px; min-height:48px; color:var(--violet-dark); font-size:14px; font-weight:750; text-decoration:none; }
.text-link:hover { color:var(--violet); }
.account-legal { margin-top:28px; border-top:1px solid var(--line); padding-top:18px; }
.account-legal summary { cursor:pointer; color:var(--ink); font-size:14px; font-weight:750; }
.account-legal p { margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }

@media (max-width:900px) { .auth-layout { grid-template-columns:1fr; max-width:580px; } .checkout-preview { min-height:0; } }
@media (max-width:700px) { .account-grid.account-only, .account-management { grid-template-columns:1fr; max-width:none; } }
[data-theme="dark"] .feature-card, [data-theme="dark"] .card, [data-theme="dark"] .workflow-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .plan-card, [data-theme="dark"] .visual-window, [data-theme="dark"] .canvas-card, [data-theme="dark"] .product-facts-list, [data-theme="dark"] .product-facts-output { background:var(--surface); }
[data-theme="dark"] .download-card { background:linear-gradient(115deg,rgba(42,31,74,.96),rgba(28,28,34,.97) 52%,rgba(61,43,33,.94)); border-color:var(--line); box-shadow:0 24px 80px rgba(0,0,0,.32); }
[data-theme="dark"] .download-spec { background:rgba(36,36,45,.9); border-color:rgba(140,117,255,.3); }
[data-theme="dark"] .plan-card-featured { background:linear-gradient(145deg,rgba(55,39,93,.9),rgba(28,28,34,.94)); }
[data-theme="dark"] .plan-card-local { background:linear-gradient(145deg,#25252b,#1c1c22); border-color:#3a3a44; }
[data-theme="dark"] .plan-card-local .plan-price { border-top-color:#4b4b58; }
[data-theme="dark"] .pricing-compare-wrap { background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .pricing-plan-guidance article { background:var(--surface); }
[data-theme="dark"] .upcoming-card { background:var(--surface); border-color:var(--line); }
@media (max-width:900px) { .upcoming-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .upcoming-heading { margin-bottom:22px; } .upcoming-heading > p:last-child { font-size:15px; } .upcoming-grid { grid-template-columns:1fr; } .upcoming-card { min-height:0; } .upcoming-card h3 { font-size:30px; } }
[data-theme="dark"] .button-secondary { background:var(--surface); color:var(--ink); } [data-theme="dark"] .button-secondary:hover { background:var(--soft); } [data-theme="dark"] .plan-summary, [data-theme="dark"] .price-placeholder { background:var(--soft); } [data-theme="dark"] input { background:var(--input-bg); color:var(--ink); border-color:var(--line); } [data-theme="dark"] footer { background:rgba(19,19,22,.7); } [data-theme="dark"] .menu-button { background:var(--surface-solid); color:var(--ink); }

.cookie-notice { position:fixed; z-index:60; right:16px; bottom:16px; display:flex; align-items:center; gap:14px; width:min(420px,calc(100% - 32px)); padding:12px 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-solid); box-shadow:0 14px 38px rgba(35,21,46,.16); }
.cookie-notice[hidden] { display:none; }
.cookie-notice-copy { min-width:0; }
.cookie-notice-copy strong { display:block; margin-bottom:3px; font-size:11px; }
.cookie-notice-copy p { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.cookie-notice-copy a { color:var(--violet-dark); text-underline-offset:3px; }
.cookie-notice-dismiss { flex:0 0 auto; min-height:30px; padding:6px 10px; border-radius:999px; background:var(--violet); color:#fff; font-size:10px; font-weight:750; }
.cookie-notice-dismiss:hover { background:var(--violet-dark); }
@media (max-width:480px) { .cookie-notice { right:10px; bottom:10px; gap:10px; width:calc(100% - 20px); padding:10px; } }
.windows-release-notice { position:fixed; z-index:59; left:16px; bottom:16px; width:min(390px,calc(100% - 32px)); padding:20px 48px 19px 20px; border:1px solid rgba(22,118,210,.24); border-radius:18px; background:linear-gradient(135deg,var(--surface-solid),color-mix(in srgb,var(--surface-solid) 82%,#dceeff)); box-shadow:0 18px 46px rgba(21,70,120,.18); }
.windows-release-notice[hidden] { display:none; }
.windows-release-notice .eyebrow { margin:0 0 8px; color:#1676d2; }
.windows-release-notice > strong { display:block; max-width:290px; color:var(--ink); font-size:20px; line-height:1.08; letter-spacing:-.035em; }
.windows-release-notice > p:not(.eyebrow) { margin:9px 0 13px; color:var(--muted); font-size:12px; line-height:1.5; }
.windows-release-notice-link { display:inline-flex; align-items:center; gap:7px; color:#1676d2; font-size:12px; font-weight:800; text-decoration:none; }
.windows-release-notice-link:hover { color:var(--violet-dark); }
.windows-release-notice-dismiss { position:absolute; top:10px; right:10px; display:grid; width:28px; height:28px; place-items:center; padding:0 !important; border-radius:50% !important; background:transparent !important; color:var(--muted) !important; cursor:pointer; font-size:20px; font-weight:500 !important; line-height:1; }
.windows-release-notice-dismiss:hover { background:var(--soft) !important; color:var(--ink) !important; }
@media (max-width:880px) { .windows-release-notice { bottom:112px; } }
@media (max-width:480px) { .windows-release-notice { left:10px; bottom:112px; width:calc(100% - 20px); } }

/* Keep the server-rendered route aligned with the page a crawler requested before app.js runs. */
body[data-seo-page="home"] #shop-page, body[data-seo-page="home"] #download-page, body[data-seo-page="home"] #account-page,
body[data-seo-page="shop"] #marketing-page, body[data-seo-page="shop"] #download-page, body[data-seo-page="shop"] #account-page,
body[data-seo-page="download"] #marketing-page, body[data-seo-page="download"] #shop-page, body[data-seo-page="download"] #account-page,
body[data-seo-page="account"] #marketing-page, body[data-seo-page="account"] #shop-page, body[data-seo-page="account"] #download-page,
body[data-seo-page="checkout"] #marketing-page, body[data-seo-page="checkout"] #shop-page, body[data-seo-page="checkout"] #download-page { display:none !important; }
body[data-seo-page="shop"] #shop-page, body[data-seo-page="download"] #download-page, body[data-seo-page="account"] #account-page, body[data-seo-page="checkout"] #account-page { display:block !important; }

/* Clips route: product-led comparison, with a readable mobile fallback. */
.clips-panel-clapper { display:flex; min-width:0; flex:1; align-items:center; gap:18px; }
.clips-panel-clapper strong { margin-left:auto; color:#bca8ff; font-size:9px; letter-spacing:.12em; white-space:nowrap; }
.clips-panel-top { position:relative; z-index:2; transform-origin:26px 21px; background:#141523; border-radius:27px 27px 0 0; border-bottom-color:transparent; }
.clips-hero-panel { overflow:visible; border-color:transparent; background:transparent; transform:translateZ(0) rotate(1.2deg); backface-visibility:hidden; -webkit-backface-visibility:hidden; isolation:isolate; will-change:transform; }
.clips-panel-footer { background:linear-gradient(105deg,rgba(11,35,47,.94),rgba(92,35,48,.94)); border-radius:0 0 27px 27px; }
.clips-panel-wave { background-color:#252040; background-image:linear-gradient(90deg,rgba(99,55,255,.2),rgba(255,255,255,.04),rgba(213,125,86,.18)); }
.clips-panel-grid { background-color:#18222f; }
.clips-panel-top.is-clapper-ready { animation:clips-slate-action .62s cubic-bezier(.18,.78,.28,1) forwards; }
@keyframes clips-slate-action { 0% { transform:rotate(-38deg); } 100% { transform:rotate(0deg); } }
.clips-output-cell { position:relative; }
.clips-output-device { display:block; width:28px; height:42px; margin:0 0 2px; border:2px solid rgba(255,255,255,.86); border-radius:7px; background:rgba(99,55,255,.32); box-shadow:inset 0 0 0 3px rgba(24,21,46,.46); transform:rotate(90deg) scale(.72); transform-origin:center; opacity:.9; transition:transform .72s cubic-bezier(.22,.8,.25,1), opacity .3s ease; }
.clips-output-device i { display:block; width:12px; height:2px; margin:4px auto 0; border-radius:99px; background:rgba(255,255,255,.72); }
.clips-output-cell [data-clips-output] { opacity:0; transition:opacity .32s ease .18s; }
.clips-output-cell.is-ready .clips-output-device { transform:rotate(0deg) scale(1); }
.clips-output-cell.is-ready [data-clips-output] { opacity:1; }
@media (prefers-reduced-motion: reduce) { .clips-panel-top.is-clapper-ready { animation:none; } .clips-output-device, .clips-output-cell [data-clips-output] { transition:none; } }
.clips-faq { margin-top:110px; } .clips-faq .clips-section-heading { margin:0 0 30px; } .clips-faq-list { max-width:920px; border-top:1px solid var(--line); } .clips-faq-item { border-bottom:1px solid var(--line); } .clips-faq-item h3 { margin:0; } .clips-faq-list .clips-faq-question { display:flex; width:100%; align-items:center; justify-content:space-between; gap:24px; padding:22px 4px; border-radius:0; background:transparent !important; color:var(--ink) !important; cursor:pointer; font-size:18px; font-weight:750; line-height:1.3; text-align:left; } .clips-faq-list .clips-faq-question::after { content:'+'; flex:0 0 auto; color:var(--violet); font-size:26px; font-weight:400; line-height:1; } .clips-faq-list .clips-faq-question[aria-expanded="true"]::after { content:'−'; } .clips-faq-answer { max-width:760px; padding:0 42px 23px 4px; color:var(--muted); font-size:15px; line-height:1.6; }
body[data-seo-page="home"] #clips-page, body[data-seo-page="home"] #pricing-page, body[data-seo-page="home"] #account-page,
body[data-seo-page="pricing"] #marketing-page, body[data-seo-page="pricing"] #clips-page, body[data-seo-page="pricing"] #account-page,
body[data-seo-page="clips"] #marketing-page, body[data-seo-page="clips"] #pricing-page, body[data-seo-page="clips"] #account-page,
body[data-seo-page="account"] #marketing-page, body[data-seo-page="account"] #pricing-page, body[data-seo-page="account"] #clips-page,
body[data-seo-page="checkout"] #marketing-page, body[data-seo-page="checkout"] #pricing-page, body[data-seo-page="checkout"] #clips-page { display:none !important; }
body[data-seo-page="pricing"] #pricing-page, body[data-seo-page="clips"] #clips-page, body[data-seo-page="account"] #account-page, body[data-seo-page="checkout"] #account-page { display:block !important; }
[data-theme="dark"] .clips-proof-card, [data-theme="dark"] .clips-compare-wrap, [data-theme="dark"] .clips-score-grid { background:var(--surface); }
[data-theme="dark"] .clips-proof-card-featured, [data-theme="dark"] .clips-row-poeysia { background:linear-gradient(145deg,rgba(55,39,93,.9),rgba(28,28,34,.94)); }
[data-theme="dark"] .clips-compare-table td strong, [data-theme="dark"] .clips-compare-table tbody th a { color:var(--ink); }
[data-theme="dark"] .clips-business-strip { border-color:var(--line); }
@media (max-width:900px) { .clips-hero { grid-template-columns:1fr; gap:34px; } .clips-hero-copy { max-width:720px; } .clips-hero-panel { max-width:720px; width:100%; margin:0 auto; } .clips-business-strip { grid-template-columns:1fr; gap:24px; } .clips-reality-check { grid-template-columns:1fr; gap:30px; } }
@media (max-width:700px) { .clips-hero { min-height:0; padding:24px 0 42px; } .clips-panel-grid { grid-template-columns:1fr; } .clips-panel-grid > div { grid-template-columns:90px 1fr 1fr; align-items:center; gap:8px; padding:14px 16px; } .clips-panel-grid small { grid-row:span 2; } .clips-panel-grid b { font-size:15px; } .clips-panel-grid span { grid-column:2 / span 2; } .clips-panel-footer { display:block; line-height:1.7; } .clips-panel-footer strong { display:block; } .clips-proof-grid { grid-template-columns:1fr; margin-top:54px; } .clips-proof-card { min-height:0; } .clips-proof-card p:not(.eyebrow) { min-height:0; margin-bottom:0; } .clips-section-heading, .clips-scorecard, .clips-faq { margin-top:70px; } .clips-reality-check { margin-top:70px; padding:34px 24px; } .clips-cta { margin-top:70px; padding:50px 24px; } .clips-score-grid > div { grid-template-columns:1fr; gap:7px; padding:16px 18px; } .clips-score-grid > div:first-child { display:none; } .clips-faq-list .clips-faq-question { padding:18px 2px; font-size:16px; } .clips-faq-answer { padding:0 30px 20px 2px; } }
@media (max-width:700px) { .feature-grid.section-gap { margin-top:27px; } }
@media (max-width:700px) { .clips-panel-grid .clips-output-cell { grid-template-columns:90px 36px 1fr; } .clips-output-cell .clips-output-device { grid-column:2; grid-row:1; } .clips-output-cell [data-clips-output] { grid-column:3; grid-row:1; align-self:center; } .clips-output-cell > span:last-child { grid-column:2 / span 2; } }

/* About, press and release archive. */
body[data-seo-page="about"] #marketing-page, body[data-seo-page="about"] #pricing-page, body[data-seo-page="about"] #clips-page, body[data-seo-page="about"] #storytelling-page, body[data-seo-page="about"] #press-page, body[data-seo-page="about"] #releases-page, body[data-seo-page="about"] #account-page,
body[data-seo-page="press"] #marketing-page, body[data-seo-page="press"] #pricing-page, body[data-seo-page="press"] #clips-page, body[data-seo-page="press"] #storytelling-page, body[data-seo-page="press"] #about-page, body[data-seo-page="press"] #releases-page, body[data-seo-page="press"] #account-page,
body[data-seo-page="releases"] #marketing-page, body[data-seo-page="releases"] #pricing-page, body[data-seo-page="releases"] #clips-page, body[data-seo-page="releases"] #storytelling-page, body[data-seo-page="releases"] #about-page, body[data-seo-page="releases"] #press-page, body[data-seo-page="releases"] #account-page { display:none !important; }
body[data-seo-page="about"] #about-page, body[data-seo-page="press"] #press-page, body[data-seo-page="releases"] #releases-page { display:block !important; }
body[data-seo-page="badges"] #marketing-page, body[data-seo-page="badges"] #pricing-page, body[data-seo-page="badges"] #use-your-own-ai-page, body[data-seo-page="badges"] #clips-page, body[data-seo-page="badges"] #storytelling-page, body[data-seo-page="badges"] #about-page, body[data-seo-page="badges"] #press-page, body[data-seo-page="badges"] #releases-page, body[data-seo-page="badges"] #success-stories-page, body[data-seo-page="badges"] #facts-page, body[data-seo-page="badges"] #methodology-page, body[data-seo-page="badges"] #compare-poeysiapro-vs-opusclip-page, body[data-seo-page="badges"] #account-page { display:none !important; }
body[data-seo-page="badges"] #badges-page { display:block !important; }
.editorial-page { max-width:1120px; margin:0 auto; }
.editorial-hero { max-width:820px; padding:56px 0 20px; }
.editorial-hero h1 { max-width:800px; }
.editorial-two-column { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; align-items:start; }
.editorial-two-column h2, .founder-panel h2 { font-size:clamp(36px,5vw,62px); }
.editorial-copy { max-width:650px; color:var(--muted); font-size:17px; line-height:1.65; }
.editorial-copy p:last-child { margin-bottom:0; }
.imprint-details { max-width:920px; }
.imprint-facts { display:grid; grid-template-columns:1fr; width:100%; margin:0; border-top:1px solid var(--line); }
.imprint-facts div { display:grid; grid-template-columns:minmax(180px,.75fr) 1.25fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.imprint-facts dt { color:var(--muted); font-size:13px; line-height:1.45; }
.imprint-facts dd { margin:0; color:var(--ink); font-size:15px; font-weight:650; line-height:1.55; }
.imprint-facts a { color:var(--violet-dark); text-decoration:none; }
.imprint-facts a:hover { text-decoration:underline; }
.founder-panel { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:55px; padding:48px; border-radius:28px; background:linear-gradient(120deg,rgba(235,229,255,.9),rgba(255,255,255,.76)); border:1px solid var(--line); }
.founder-panel-copy { max-width:690px; color:var(--muted); line-height:1.6; }
.founder-panel-copy h2 { color:var(--ink); }
.founder-stats { display:grid; align-content:center; gap:12px; }
.founder-stats div { padding:18px 0; border-top:1px solid var(--line); }
.founder-stats strong, .founder-stats span { display:block; }
.founder-stats strong { color:var(--violet); font-size:38px; letter-spacing:-.06em; }
.founder-stats span { color:var(--muted); font-size:13px; }
.editorial-section-heading { max-width:720px; margin-bottom:30px; }
.timeline-list { max-width:900px; border-top:1px solid var(--line); }
.timeline-list article { display:grid; grid-template-columns:130px 1fr; gap:30px; padding:27px 0; border-bottom:1px solid var(--line); }
.timeline-list time { color:var(--violet); font-size:14px; font-weight:800; letter-spacing:.08em; }
.timeline-list h3 { margin:0 0 8px; font-size:22px; }
.timeline-list p { max-width:680px; margin:0; color:var(--muted); line-height:1.55; }
.principles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.principles-grid article, .home-resource-card { padding:26px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.principles-grid h3 { margin-bottom:10px; font-size:22px; }
.principles-grid p { margin:0; color:var(--muted); line-height:1.55; }
.press-spotlight, .press-boilerplate { padding:42px 48px; border:1px solid rgba(99,92,82,.14); border-left:2px solid rgba(99,92,82,.22); border-radius:0 24px 24px 0; background:linear-gradient(115deg,rgba(247,246,243,.94),rgba(255,255,255,.98) 52%,rgba(255,248,238,.78)); }
.press-quote { max-width:900px; margin:0; font-size:clamp(24px,3vw,38px); line-height:1.2; letter-spacing:-.04em; }
.press-boilerplate p:last-child { max-width:900px; margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.press-facts-grid { display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); }
.press-facts-grid div { display:grid; grid-template-columns:minmax(120px,.7fr) 1.3fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.press-facts-grid dt { color:var(--muted); font-size:13px; }
.press-facts-grid dd { margin:0; font-weight:700; line-height:1.4; }
.press-assets-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.press-assets-grid a { display:grid; gap:8px; color:var(--ink); text-decoration:none; }
.press-assets-grid img { width:100%; aspect-ratio:1.2; object-fit:cover; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.press-assets-grid strong { font-size:14px; }
.press-assets-grid span { color:var(--muted); font-size:12px; }
.press-contact { padding:55px 48px; border-radius:28px; color:#fff; background:linear-gradient(130deg,#4f2bcf,#7b2d3a); }
.press-contact .eyebrow, .press-contact p:not(.eyebrow) { color:rgba(255,255,255,.75); }
.press-contact h2 { font-size:clamp(34px,5vw,62px); }
.release-hero { max-width:900px; }
.release-policy { max-width:700px; margin:35px 0 0; padding-left:17px; border-left:2px solid var(--line); color:var(--muted); font-size:14px; line-height:1.5; }
.release-platform-switch { display:inline-flex; gap:4px; margin:38px 0 25px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.release-platform-tab { min-width:112px; padding:10px 18px !important; border-radius:999px !important; background:transparent !important; color:var(--muted) !important; cursor:pointer; font-size:13px; font-weight:800; }
.release-platform-tab:hover { color:var(--ink) !important; }
.release-platform-tab.is-active { background:var(--ink) !important; color:var(--surface-solid) !important; }
.release-platform-panel[hidden] { display:none; }
.release-list { display:grid; gap:22px; }
.release-entry { padding:36px 40px; border:1px solid rgba(99,92,82,.14); border-radius:26px; background:linear-gradient(115deg,rgba(247,246,243,.94),rgba(255,255,255,.98) 52%,rgba(255,248,238,.78)); box-shadow:0 18px 60px rgba(53,33,100,.06); }
.release-current { border-color:rgba(99,92,82,.18); }
.release-entry-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.release-entry h2 { font-size:clamp(34px,5vw,58px); }
.release-badge { padding:7px 10px; border-radius:999px; color:var(--ink); background:rgba(23,23,27,.07); font-size:10px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.release-archived { color:var(--muted); background:rgba(23,23,27,.05); }
.release-summary { max-width:760px; color:var(--muted); font-size:17px; line-height:1.6; }
.release-columns, .release-feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:28px; }
.release-feature-grid { grid-template-columns:repeat(3,1fr); }
.release-columns h3, .release-feature-grid h3 { margin-bottom:10px; font-size:18px; }
.release-columns ul { display:grid; gap:9px; padding-left:18px; margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.release-update-sections > div { padding-top:18px; border-top:1px solid var(--line); }
.release-feature-grid article { padding-top:18px; border-top:1px solid var(--line); }
.release-feature-grid p, .release-included p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.release-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:30px; }
.release-availability-note { margin:22px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.platform-download-buttons { display:grid; gap:8px; }
.button[aria-disabled="true"] { opacity:.48; cursor:not-allowed; pointer-events:none; }
.release-history-note { margin:30px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.5; }
.release-history-note a { color:var(--violet-dark); font-weight:750; }
.release-included { margin-top:32px; padding:27px; border-radius:17px; background:#f7f6f3; }
.release-included h3 { margin:0 0 20px; font-size:22px; }
.release-feature-list { display:grid; gap:0; padding:0; margin:0; list-style:none; }
.release-feature-list li { display:grid; grid-template-columns:minmax(210px,.7fr) 1.3fr; gap:20px; padding:13px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.45; }
.release-feature-list li:last-child { border-bottom:1px solid var(--line); }
.release-feature-list strong { color:var(--ink); }
.release-feature-list span { color:var(--muted); }
.release-note-panel { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; max-width:none; margin-top:24px; padding:15px 0 0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.release-note-panel strong { display:inline; margin:0; color:var(--muted); font-size:13px; font-weight:650; }
.release-note-panel p { display:inline; margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.home-resources-heading { max-width:820px; margin-bottom:25px; }
.home-resources-heading h2 { font-size:clamp(32px,4vw,52px); }
.home-resources-heading > p { margin:0; color:var(--muted); line-height:1.55; }
.home-resources-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.home-resource-card { display:grid; grid-template-rows:auto auto 1fr auto; gap:8px; min-height:218px; padding:22px; color:var(--ink); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.home-resource-card:hover { transform:translateY(-3px); border-color:rgba(99,55,255,.45); box-shadow:0 12px 30px rgba(53,33,100,.1); }
.home-resource-card .eyebrow { margin-bottom:2px; }
.home-resource-card strong { font-size:21px; letter-spacing:-.04em; }
.home-resource-description { color:var(--muted); font-size:13px; line-height:1.45; }
.home-resource-cta { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:13px; font-weight:750; }
.home-resource-cta span { color:var(--violet); font-size:17px; line-height:1; transition:transform .18s ease; }
.home-resource-card:hover .home-resource-cta span { transform:translateX(2px); }
.badges-hero { max-width:900px; }
.badges-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.badge-card { padding:32px; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:0 18px 60px rgba(53,33,100,.05); }
.badge-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.badge-card-header .eyebrow { margin:0; }
.badge-status { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; white-space:nowrap; }
.badge-card h3 { margin:0 0 12px; font-size:clamp(26px,3vw,40px); letter-spacing:-.045em; }
.badge-card > p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.badge-preview { display:flex; align-items:center; min-height:140px; margin:28px 0; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--soft); }
.badge-preview img { display:block; width:244px; height:56px; max-width:100%; }
.badge-preview-placeholder { align-items:flex-start; justify-content:center; flex-direction:column; gap:6px; background:linear-gradient(135deg,#f2eee8,#ebe7f4); color:var(--ink); }
.badge-preview-placeholder span { font-size:24px; font-weight:850; letter-spacing:-.06em; }
.badge-preview-placeholder small { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; }
.badge-card-planned { background:linear-gradient(145deg,rgba(247,245,252,.95),rgba(255,255,255,.9)); box-shadow:none; }
.badge-note { display:block; color:var(--muted); font-size:12px; font-weight:700; }
[data-theme="dark"] .founder-panel { background:linear-gradient(145deg,rgba(55,39,93,.9),rgba(28,28,34,.94)); }
[data-theme="dark"] .release-entry { border-color:var(--line); background:linear-gradient(115deg,rgba(38,38,40,.96),rgba(28,28,34,.97) 52%,rgba(51,44,38,.92)); box-shadow:0 18px 60px rgba(0,0,0,.2); }
[data-theme="dark"] .release-included { background:#242426; }
[data-theme="dark"] .release-badge { color:var(--ink); background:rgba(255,255,255,.1); }
[data-theme="dark"] .press-spotlight, [data-theme="dark"] .press-boilerplate { border-color:var(--line); background:linear-gradient(115deg,rgba(38,38,40,.96),rgba(28,28,34,.97) 52%,rgba(51,44,38,.92)); }
[data-theme="dark"] .press-contact { background:linear-gradient(130deg,#3f3f43,#4a4038); }
@media (max-width:900px) { .editorial-two-column, .founder-panel { grid-template-columns:1fr; gap:28px; } .principles-grid, .press-assets-grid, .badges-grid { grid-template-columns:repeat(2,1fr); } .release-feature-grid { grid-template-columns:repeat(2,1fr); } .home-resources-heading { grid-template-columns:1fr; gap:15px; } }
@media (max-width:700px) { .editorial-hero { padding:26px 0 10px; } .release-platform-switch { display:flex; width:100%; margin-top:30px; } .release-platform-tab { flex:1; } .founder-panel, .press-spotlight, .press-boilerplate, .press-contact, .release-entry, .badge-card { padding:27px 22px; } .timeline-list article { grid-template-columns:1fr; gap:9px; } .principles-grid, .press-assets-grid, .press-facts-grid, .release-columns, .release-feature-grid, .home-resources-grid, .badges-grid { grid-template-columns:1fr; } .press-facts-grid div, .release-feature-list li { grid-template-columns:1fr; gap:5px; } .release-entry-header { display:block; } .release-badge { display:inline-flex; margin-bottom:12px; } .badge-preview { padding:22px; } }

/* Success stories. */
body[data-seo-page="success-stories"] #marketing-page, body[data-seo-page="success-stories"] #pricing-page, body[data-seo-page="success-stories"] #clips-page, body[data-seo-page="success-stories"] #storytelling-page, body[data-seo-page="success-stories"] #about-page, body[data-seo-page="success-stories"] #press-page, body[data-seo-page="success-stories"] #releases-page, body[data-seo-page="success-stories"] #account-page { display:none !important; }
body[data-seo-page="success-stories"] #success-stories-page { display:block !important; }
.success-stories-hero { max-width:900px; }
.success-stories-hero h1 { max-width:800px; }
.success-story-list { display:grid; gap:32px; }
.success-story-entry { overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.06); }
.success-story-header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:44px 48px 34px; }
.success-story-header h2 { max-width:760px; margin:0 0 16px; font-size:clamp(36px,5vw,64px); line-height:.98; }
.success-story-summary { max-width:760px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.success-story-disclosure { max-width:760px; margin:13px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.success-story-badge { flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.success-story-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.success-story-stats div { padding:22px 28px; border-right:1px solid var(--line); }
.success-story-stats div:last-child { border-right:0; }
.success-story-stats strong, .success-story-stats span { display:block; }
.success-story-stats strong { margin-bottom:5px; color:var(--ink); font-size:32px; letter-spacing:-.06em; }
.success-story-stats span { color:var(--muted); font-size:12px; line-height:1.4; }
.success-story-content { display:grid; grid-template-columns:repeat(2,1fr); gap:42px; padding:38px 48px 40px; }
.success-story-content h3 { max-width:430px; margin:0 0 10px; font-size:26px; line-height:1.04; letter-spacing:-.05em; }
.success-story-content p:not(.eyebrow) { max-width:540px; margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.success-story-gallery { display:grid; gap:14px; padding:28px 48px 40px; background:#f3f2ef; }
.success-story-gallery-three { grid-template-columns:repeat(3,1fr); }
.success-story-gallery-four { grid-template-columns:repeat(4,1fr); }
.success-story-gallery-five { grid-template-columns:repeat(5,1fr); }
.success-story-gallery figure { min-width:0; margin:0; }
.success-story-gallery img { display:block; width:100%; height:420px; object-fit:cover; object-position:top; border:1px solid var(--line); border-radius:18px; background:#fff; }
.success-story-gallery img.success-story-image-native-frame { border:0; }
.success-story-gallery figcaption { padding:10px 3px 0; color:var(--muted); font-size:12px; }
.success-stories-closing { padding:62px 9%; border-radius:28px; background:#f3f2ef; text-align:center; }
.success-stories-closing h2 { max-width:760px; margin:0 auto 14px; font-size:clamp(40px,5vw,68px); }
.success-stories-closing p:not(.eyebrow) { max-width:600px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.6; }
.success-stories-closing .hero-actions { justify-content:center; margin-top:25px; }
.success-stories-closing .button { margin-top:0; }
[data-theme="dark"] .success-story-entry { background:var(--surface); }
[data-theme="dark"] .success-story-gallery, [data-theme="dark"] .success-stories-closing { background:#242426; }
[data-theme="dark"] .success-story-gallery img { background:#1c1c22; }
@media (max-width:900px) { .home-resources-grid { grid-template-columns:repeat(2,1fr); } .success-story-header, .success-story-content { padding-right:32px; padding-left:32px; } .success-story-gallery { padding-right:32px; padding-left:32px; } .success-story-gallery-four, .success-story-gallery-five { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .success-story-header { display:block; padding:30px 22px 25px; } .success-story-badge { display:inline-flex; margin-top:18px; } .success-story-stats { grid-template-columns:1fr; } .success-story-stats div { padding:17px 22px; border-right:0; border-bottom:1px solid var(--line); } .success-story-stats div:last-child { border-bottom:0; } .success-story-content { grid-template-columns:1fr; gap:28px; padding:30px 22px; } .success-story-gallery, .success-story-gallery-three, .success-story-gallery-four, .success-story-gallery-five { grid-template-columns:1fr 1fr; padding:22px; } .success-story-gallery img { height:310px; } .success-stories-closing { padding:46px 24px; } }

/* Pricing orientation and compact plan comparison. */
.pricing-orientation { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1120px; margin:0 auto 28px; color:var(--muted); font-size:13px; }
.pricing-orientation-item { display:flex; align-items:center; gap:9px; }
.pricing-orientation-item span { color:var(--violet); font-size:17px; font-weight:800; }
.pricing-free-start { display:flex; align-items:center; justify-content:space-between; gap:28px; max-width:980px; margin:0 auto 28px; padding:20px 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pricing-free-start .eyebrow { margin-bottom:8px; }
.pricing-free-start p:not(.eyebrow) { max-width:740px; margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.pricing-free-start strong { color:var(--ink); }
.pricing-free-start .text-link { flex:0 0 auto; white-space:nowrap; }
.pricing-grid-two { width:min(100%,980px); max-width:980px; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:center; }
.plan-badge-neutral { background:rgba(255,255,255,.72); color:var(--muted); border:1px solid var(--line); }
.plan-card-note { min-height:32px; margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
.plan-card-info { margin:auto 0 0; padding-top:18px; color:var(--muted); font-size:11px; line-height:1.45; }
@media (min-width:701px) { .plan-card-heading { height:250px; min-height:250px; } .plan-price { min-height:86px; } }
@media (min-width:701px) and (max-width:1000px) {
  body[data-seo-page="pricing"] .main-nav { display:none; }
  body[data-seo-page="pricing"] .menu-button { display:block; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-solid); color:var(--ink); font-size:13px; }
  body[data-seo-page="pricing"] .mobile-nav { max-height:0; overflow:hidden; padding:0 24px; display:grid; gap:0; background:var(--header-bg); transition:max-height .2s ease, padding .2s ease; }
  body[data-seo-page="pricing"] .mobile-nav.open { max-height:520px; padding:8px 24px 18px; }
  body[data-seo-page="pricing"] .mobile-nav a { padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; }
  body[data-seo-page="pricing"] .mobile-theme-row { position:relative; display:flex; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  body[data-seo-page="pricing"] .mobile-theme-row .theme-menu { position:static; margin-left:8px; }
  body[data-seo-page="pricing"] .mobile-theme-row .icon-control { padding-left:0; }
  .plan-label-row { flex-wrap:wrap; }
  .plan-badge { white-space:normal; }
  .plan-card-heading { height:290px; min-height:290px; }
}
.pricing-card-footnotes { max-width:780px; margin:26px auto 0; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
.pricing-card-footnotes p { margin:0; }
.pricing-card-footnotes p + p { margin-top:5px; }
@media (max-width:700px) { .mobile-nav.open { max-height:680px; } .pricing-grid-two { width:100%; grid-template-columns:1fr; } }
@media (min-width:701px) and (max-width:1000px) { body[data-seo-page="pricing"] .mobile-nav.open { max-height:680px; } }
.pricing-compare { max-width:1120px; margin:46px auto 0; }
.pricing-compare h2 { margin-bottom:18px; font-size:clamp(28px,3vw,38px); }
.pricing-compare-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.78); }
.pricing-compare table { width:100%; min-width:650px; border-collapse:collapse; text-align:left; }
.pricing-compare th, .pricing-compare td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px; line-height:1.35; }
.pricing-compare thead th { color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.pricing-compare tbody tr:last-child th, .pricing-compare tbody tr:last-child td { border-bottom:0; }
.pricing-compare tbody th { width:22%; color:var(--muted); font-weight:650; }
.pricing-compare tbody td { color:var(--ink); }
.pricing-compare tbody td:not(:first-child) { font-weight:650; }
.pricing-compare-footnote { max-width:820px; margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.pricing-faq { max-width:920px; margin:82px auto 0; }
.pricing-faq-heading { margin-bottom:30px; }
.pricing-faq-heading h2 { max-width:620px; margin:0; font-size:clamp(30px,4vw,48px); }
.pricing-faq-list { border-top:1px solid var(--line); }
.pricing-faq-item { padding:21px 4px; border-bottom:1px solid var(--line); }
.pricing-faq-item h3 { margin:0 0 8px; font-size:18px; letter-spacing:-.03em; }
.pricing-faq-item p { max-width:780px; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
@media (max-width:700px) { .pricing-orientation { grid-template-columns:1fr; gap:10px; margin-bottom:22px; } .pricing-free-start { display:block; padding:18px 0; } .pricing-free-start .text-link { margin-top:14px; } .pricing-compare { margin-top:36px; } .pricing-compare-wrap { border-radius:16px; } .pricing-faq { margin-top:62px; } .pricing-faq-item { padding:18px 2px; } .pricing-faq-item h3 { font-size:16px; } }

/* Articles. */
.article-page { max-width:1160px; margin:0 auto; }
.article-hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:64px; align-items:center; min-height:610px; padding:48px 0 68px; }
.article-hero-copy { max-width:700px; }
.article-hero h1 { max-width:760px; margin-bottom:24px; font-size:clamp(58px,7vw,96px); }
.article-hero .lead { max-width:650px; font-size:20px; }
.article-meta { display:flex; flex-wrap:wrap; gap:9px 18px; color:var(--muted); font-size:12px; }
.article-meta span + span::before { content:'·'; margin-right:18px; color:var(--violet); }
.article-hero-visual { position:relative; min-height:430px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:44px 28px; border:1px solid var(--line); border-radius:32px; background:var(--plum); box-shadow:0 28px 90px rgba(53,33,100,.18); }
.article-hero-visual::before { content:''; position:absolute; inset:0; opacity:.3; background-image:radial-gradient(rgba(255,255,255,.24) .8px,transparent .8px); background-size:20px 20px; }
.article-source-card { position:relative; z-index:1; width:168px; min-height:278px; padding:20px; border:1px solid rgba(255,255,255,.25); border-radius:21px; background:linear-gradient(180deg,#6337ff,#35204c); color:#fff; box-shadow:0 18px 46px rgba(0,0,0,.28); transform:rotate(-3deg); }
.article-source-card > span { font-size:10px; font-weight:800; letter-spacing:.16em; }
.article-source-card > strong { position:absolute; bottom:20px; left:20px; font-size:13px; }
.article-wave { height:100px; margin-top:43px; display:flex; align-items:center; justify-content:center; gap:5px; }
.article-wave i { display:block; width:4px; border-radius:99px; background:rgba(255,255,255,.76); }
.article-wave i:nth-child(1),.article-wave i:nth-child(9) { height:20px; }.article-wave i:nth-child(2),.article-wave i:nth-child(8) { height:42px; }.article-wave i:nth-child(3),.article-wave i:nth-child(7) { height:64px; }.article-wave i:nth-child(4),.article-wave i:nth-child(6) { height:88px; }.article-wave i:nth-child(5) { height:52px; }
.article-flow-arrow { position:relative; z-index:2; margin:0 9px; color:#a993ff; font-size:32px; }
.article-clip-stack { position:relative; z-index:1; width:150px; height:300px; }
.article-clip-stack div { position:absolute; width:116px; height:214px; padding:17px; border:1px solid rgba(255,255,255,.3); border-radius:18px; background:linear-gradient(160deg,#7b52ff,#24152e 72%); color:#fff; box-shadow:0 18px 40px rgba(0,0,0,.3); }
.article-clip-stack div:nth-child(1) { top:0; left:0; transform:rotate(4deg); }.article-clip-stack div:nth-child(2) { top:40px; left:22px; transform:rotate(8deg); }.article-clip-stack div:nth-child(3) { top:80px; left:43px; transform:rotate(12deg); }
.article-clip-stack b,.article-clip-stack span { display:block; }.article-clip-stack b { font-size:11px; letter-spacing:.14em; }.article-clip-stack span { position:absolute; bottom:17px; left:17px; font-size:13px; font-weight:750; }
.article-thesis { max-width:980px; margin:0 auto 104px; padding:38px 44px; border-left:4px solid var(--violet); border-radius:0 24px 24px 0; background:var(--surface); box-shadow:0 18px 60px rgba(53,33,100,.06); }
.article-thesis > p:last-child { max-width:880px; margin:0; font-size:clamp(24px,3vw,38px); font-weight:730; line-height:1.2; letter-spacing:-.04em; }
.article-layout { display:grid; grid-template-columns:210px minmax(0,800px); gap:70px; align-items:start; justify-content:center; }
.article-toc { position:sticky; top:82px; display:grid; gap:0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-toc .eyebrow { margin:0 0 10px; }
.article-toc a { padding:8px 0 8px 14px; border-left:2px solid transparent; color:var(--muted); font-size:13px; line-height:1.4; text-decoration:none; transition:border-color .18s ease,color .18s ease; }
.article-toc a:hover { color:var(--ink); }
.article-toc a.is-active { border-left-color:var(--violet); color:var(--ink); font-weight:750; }
.article-body { min-width:0; }
.article-section { scroll-margin-top:84px; padding-top:0; border-top:0; }
.article-section + .article-section { margin-top:120px; }
.article-section h2 { max-width:760px; margin-bottom:24px; font-size:clamp(40px,5vw,64px); line-height:.98; }
.article-section > p:not(.eyebrow):not(.article-caveat) { max-width:730px; margin-bottom:20px; color:var(--muted); font-size:17px; line-height:1.72; }
.article-section a,.article-sources a { text-decoration-thickness:1px; text-underline-offset:3px; }
.article-note { display:grid; gap:8px; margin:38px 0 4px; padding:3px 0 3px 24px; border:0; border-left:3px solid var(--ink); border-radius:0; background:transparent; }
.article-note strong { font-size:22px; letter-spacing:-.035em; }.article-note span { color:var(--muted); font-size:15px; line-height:1.6; }
.article-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:34px 0 18px; }
.article-stat-grid article { min-height:174px; padding:23px; border:1px solid var(--line); border-radius:21px; background:var(--surface); }
.article-stat-grid strong,.article-stat-grid span { display:block; }.article-stat-grid strong { margin-bottom:16px; color:var(--violet); font-size:40px; letter-spacing:-.06em; }.article-stat-grid span { color:var(--muted); font-size:12px; line-height:1.5; }
.article-caveat { margin:0 0 36px; color:var(--muted); font-size:12px; line-height:1.55; }
.article-reason-grid,.article-production-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.article-reason-grid article,.article-production-grid article { padding:25px; border:1px solid var(--line); border-radius:21px; background:rgba(255,255,255,.6); }
.article-reason-grid article > span { display:block; margin-bottom:26px; color:var(--violet); font-size:11px; font-weight:800; letter-spacing:.15em; }
.article-reason-grid h3,.article-framework h3,.article-workflow h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.04em; }
.article-reason-grid p,.article-production-grid p,.article-framework p,.article-workflow p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.article-framework { margin:35px 0 40px; padding:0; border-top:1px solid var(--line); list-style:none; }
.article-framework li { display:grid; grid-template-columns:58px 1fr; gap:22px; padding:25px 2px; border-bottom:1px solid var(--line); }
.article-framework li > span { color:var(--violet); font-size:12px; font-weight:800; letter-spacing:.14em; }
.article-production-grid article > strong { display:block; margin-bottom:9px; font-size:17px; }
.article-workflow { display:grid; gap:0; margin:34px 0 42px; border-top:1px solid var(--line); }
.article-workflow article { display:grid; grid-template-columns:48px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.article-workflow article > span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid rgba(99,55,255,.3); border-radius:50%; color:var(--violet); font-size:12px; font-weight:800; }
.article-product-panel { display:grid; grid-template-columns:1fr; gap:28px; align-items:start; padding:38px; border-radius:28px; background:var(--plum); color:#fff; }
.article-product-panel .eyebrow { color:#bbaaff; }.article-product-panel h3 { max-width:540px; margin:0 0 12px; font-size:clamp(30px,4vw,46px); line-height:1; letter-spacing:-.055em; }.article-product-panel p:not(.eyebrow) { margin:0; color:rgba(255,255,255,.7); font-size:14px; line-height:1.6; }
.article-product-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }.article-product-actions .button { width:auto; }.article-product-actions .text-link { min-height:48px; padding:0 4px; color:#fff; font-size:13px; white-space:nowrap; }
.article-metrics { margin:34px 0 25px; border-top:1px solid var(--line); }
.article-metrics div { display:grid; grid-template-columns:210px 1fr; gap:32px; padding:23px 0; border-bottom:1px solid var(--line); }
.article-metrics dt { font-size:16px; font-weight:750; }.article-metrics dd { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.article-checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin:32px 0 0; padding:0; list-style:none; }
.article-checklist li { display:flex; align-items:flex-start; gap:13px; min-height:90px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); font-size:14px; line-height:1.45; }
.article-checklist span { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:var(--violet); color:#fff; font-size:12px; font-weight:800; }
.article-conclusion { margin-top:100px; padding:62px 9%; border-radius:30px; background:var(--violet); color:#fff; text-align:center; }
.article-conclusion .eyebrow { color:#ded5ff; }.article-conclusion h2 { max-width:700px; margin:0 auto 16px; font-size:clamp(42px,6vw,70px); }.article-conclusion > p:not(.eyebrow) { max-width:650px; margin:0 auto; color:rgba(255,255,255,.78); font-size:17px; line-height:1.6; }.article-conclusion .hero-actions { justify-content:center; margin-top:27px; }
.article-sources { margin:82px 0 20px; padding-top:34px; border-top:1px solid var(--line); }
.article-sources h2 { font-size:30px; }.article-sources > p:not(.eyebrow) { max-width:680px; color:var(--muted); font-size:13px; line-height:1.55; }.article-sources ol { display:grid; gap:9px; margin:23px 0 0; padding-left:21px; color:var(--muted); font-size:13px; line-height:1.5; }.article-sources a:hover { color:var(--violet); }
.cutout-article-visual { display:flex; min-height:380px; flex-direction:column; justify-content:space-between; padding:38px; background:var(--plum); color:#fff; }
.cutout-article-visual > span { color:#c8bcff; font-size:10px; font-weight:850; letter-spacing:.18em; }
.cutout-article-visual > strong { max-width:390px; font-size:clamp(38px,4.7vw,62px); line-height:.92; letter-spacing:-.065em; }
.cutout-article-visual > small { color:rgba(255,255,255,.7); font-size:13px; }
.cutout-test-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:32px; }
.cutout-test-card { min-width:0; overflow:hidden; margin:0; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.cutout-test-card > div { display:grid; gap:9px; padding:23px 23px 0; }
.cutout-test-card > div > span { color:var(--violet); font-size:10px; font-weight:850; letter-spacing:.15em; }
.cutout-test-card > div > strong { font-size:26px; letter-spacing:-.045em; }
.cutout-test-card > img { display:block; width:100%; height:auto; margin-top:20px; border-top:1px solid var(--line); background:var(--surface); }
.cutout-test-card figcaption { display:grid; gap:4px; padding:17px 23px 21px; border-top:1px solid var(--line); }
.cutout-test-card figcaption strong { font-size:15px; letter-spacing:-.02em; }
.cutout-test-card figcaption span { color:var(--muted); font-size:12px; line-height:1.45; }
[data-theme="dark"] .cutout-test-card { background:var(--surface); }
.article-boundary-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:34px 0 0; }
.article-boundary-grid article { padding:28px; border:1px solid var(--line); border-radius:21px; background:var(--surface); }
.article-boundary-grid article > span { display:block; margin-bottom:28px; color:var(--violet); font-size:10px; font-weight:850; letter-spacing:.16em; }
.article-boundary-grid h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.04em; }
.article-boundary-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.58; }
[data-theme="dark"] .article-boundary-grid article { background:var(--surface); }
.moment-hero-visual { display:block; padding:40px 34px; background:var(--plum); }
.moment-transcript-label { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.18); color:#fff; }
.moment-transcript-label span { font-size:10px; font-weight:800; letter-spacing:.16em; }.moment-transcript-label strong { font-size:12px; }
.moment-transcript-list { position:relative; z-index:1; display:grid; gap:10px; margin-top:20px; }
.moment-transcript-list > div { position:relative; display:grid; grid-template-columns:53px 1fr; gap:9px 13px; align-items:center; min-height:54px; padding:12px 14px; border:1px solid rgba(255,255,255,.11); border-radius:12px; color:rgba(255,255,255,.52); }
.moment-transcript-list time { grid-row:1 / span 2; font-size:11px; font-weight:750; }.moment-transcript-list i { display:block; height:5px; border-radius:99px; background:rgba(255,255,255,.18); }.moment-transcript-list i:last-child { width:64%; }
.moment-transcript-list .is-selected { min-height:72px; padding:15px; border-color:#fff; background:#fff; color:var(--plum); box-shadow:0 18px 48px rgba(0,0,0,.28); transform:translateX(-8px); }
.moment-transcript-list .is-selected span { position:absolute; top:9px; right:11px; color:var(--violet); font-size:8px; font-weight:850; letter-spacing:.14em; }.moment-transcript-list .is-selected i { background:var(--plum); opacity:.8; }
.moment-selection-bracket { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin-top:22px; color:rgba(255,255,255,.62); font-size:8px; font-weight:800; letter-spacing:.13em; }.moment-selection-bracket b { flex:1; height:1px; background:rgba(255,255,255,.32); }
.moment-boundary-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:34px 0 0; }
.moment-boundary-grid article { padding:28px; border:1px solid var(--line); border-radius:21px; background:var(--surface); }.moment-boundary-grid article > span { display:block; margin-bottom:30px; color:var(--violet); font-size:10px; font-weight:850; letter-spacing:.16em; }.moment-boundary-grid h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.04em; }.moment-boundary-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.58; }
.moment-conclusion { background:var(--plum); }
.subtitle-hero-visual { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:23px; padding:38px; background:radial-gradient(circle at 42% 42%,#31203b 0,#24152e 58%,#1b1023 100%); }
.subtitle-editorial-heading { position:relative; z-index:1; }.subtitle-editorial-heading span { display:block; margin-bottom:11px; color:var(--violet); font-size:10px; font-weight:850; letter-spacing:.22em; }.subtitle-editorial-heading strong { display:block; max-width:420px; color:#fff; font-size:clamp(35px,3.75vw,53px); font-weight:850; line-height:.88; letter-spacing:-.065em; text-transform:uppercase; }
.subtitle-track-grid { position:relative; z-index:1; display:grid; gap:13px; padding:12px 0; background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(255,255,255,.16) calc(20% - 1px),rgba(255,255,255,.16) 20%); background-size:100% 100%; }
.subtitle-cue-row { display:grid; gap:9px; align-items:center; }.subtitle-cue-row-primary { grid-template-columns:.7fr 1.35fr 1.22fr 1.62fr 1.15fr .7fr; }.subtitle-cue-row-secondary { grid-template-columns:1.45fr .72fr 1.35fr .55fr 1.85fr; }.subtitle-cue-row span { display:block; border-radius:6px; }.subtitle-cue-row-primary span { height:34px; background:#fff; }.subtitle-cue-row-secondary span { height:18px; background:rgba(169,146,181,.32); }.subtitle-cue-row-primary .is-current { position:relative; background:#fff; box-shadow:0 0 0 3px #24152e,0 0 0 5px #fff; }
.subtitle-waveform { position:relative; z-index:1; display:flex; align-items:center; gap:4px; height:55px; padding-top:4px; border-top:1px solid rgba(255,255,255,.11); }.subtitle-waveform::before { content:''; position:absolute; right:0; left:0; top:calc(50% + 2px); height:1px; background:rgba(99,55,255,.55); }.subtitle-waveform i { position:relative; flex:1; height:var(--subtitle-wave,5px); border-radius:99px; background:var(--violet); }.subtitle-waveform i:nth-child(2n) { --subtitle-wave:15px; }.subtitle-waveform i:nth-child(3n) { --subtitle-wave:29px; }.subtitle-waveform i:nth-child(4n) { --subtitle-wave:42px; }.subtitle-waveform i:nth-child(7n) { --subtitle-wave:51px; }
.subtitle-break-example { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:34px 0; }.subtitle-break-example > div { padding:25px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }.subtitle-break-example > div > span { display:block; margin-bottom:27px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.15em; }.subtitle-break-example p { margin:0; color:var(--ink); font-size:25px; font-weight:750; line-height:1.16; letter-spacing:-.04em; }.subtitle-break-example .is-preferred { border-color:var(--ink); }.subtitle-break-example .is-preferred > span { color:var(--violet); }
.subtitle-conclusion { background:var(--plum); }
[data-theme="dark"] .article-reason-grid article { background:var(--surface); }
[data-theme="dark"] .article-conclusion { background:#4c26d4; }
[data-theme="dark"] .moment-conclusion { background:var(--plum); }
[data-theme="dark"] .subtitle-conclusion { background:var(--plum); }
@media (max-width:980px) { .article-hero { grid-template-columns:1fr; gap:34px; }.article-hero-visual { min-height:380px; }.article-layout { grid-template-columns:1fr; gap:38px; }.article-toc { position:static; grid-template-columns:repeat(3,1fr); gap:0 22px; }.article-toc .eyebrow { grid-column:1/-1; }.article-thesis { margin-bottom:74px; } }
@media (max-width:700px) { .article-hero { min-height:0; padding:24px 0 46px; }.article-hero h1 { font-size:clamp(50px,15vw,72px); }.article-hero .lead { font-size:17px; }.article-meta { display:grid; gap:5px; }.article-meta span + span::before { content:none; }.article-hero-visual { min-height:320px; padding:28px 15px; border-radius:24px; }.cutout-article-visual { min-height:320px; padding:28px 23px; }.article-source-card { width:132px; min-height:230px; padding:15px; }.article-wave { margin-top:28px; }.article-source-card > strong { bottom:15px; left:15px; }.article-flow-arrow { margin:0 2px; font-size:24px; }.article-clip-stack { width:113px; height:245px; }.article-clip-stack div { width:88px; height:172px; padding:13px; }.article-clip-stack div:nth-child(2) { top:32px; left:15px; }.article-clip-stack div:nth-child(3) { top:64px; left:29px; }.article-clip-stack span { bottom:13px; left:13px; font-size:11px; }.article-thesis { margin-bottom:58px; padding:27px 24px; }.article-thesis > p:last-child { font-size:25px; }.article-toc { grid-template-columns:1fr 1fr; }.article-section + .article-section { margin-top:84px; }.article-section h2 { font-size:clamp(36px,11vw,50px); }.article-section > p:not(.eyebrow):not(.article-caveat) { font-size:16px; }.article-stat-grid,.article-reason-grid,.article-production-grid,.article-checklist,.moment-boundary-grid,.subtitle-break-example,.article-boundary-grid,.cutout-test-grid { grid-template-columns:1fr; }.article-stat-grid article { min-height:0; }.article-framework li { grid-template-columns:42px 1fr; gap:13px; }.article-product-panel { padding:28px 23px; }.article-product-actions { display:grid; max-width:280px; gap:10px; }.article-product-actions .button { width:100%; }.article-product-actions .text-link { min-height:40px; padding:0; white-space:normal; }.article-metrics div { grid-template-columns:1fr; gap:8px; }.article-conclusion { margin-top:72px; padding:48px 23px; }.article-conclusion .button { width:100%; }.article-sources { margin-top:62px; } }

/* Poeysia Storytelling product page. */
body[data-seo-page="storytelling"] #marketing-page,
body[data-seo-page="storytelling"] #pricing-page,
body[data-seo-page="storytelling"] #clips-page,
body[data-seo-page="storytelling"] #account-page,
body[data-seo-page="poeysia"] #marketing-page,
body[data-seo-page="poeysia"] #pricing-page,
body[data-seo-page="poeysia"] #clips-page,
body[data-seo-page="poeysia"] #account-page { display:none !important; }
body[data-seo-page="storytelling"] #storytelling-page,
body[data-seo-page="poeysia"] #storytelling-page { display:block !important; }

.storytelling-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.85fr); gap:70px; align-items:center; min-height:650px; padding:46px 0 64px; }
.storytelling-hero-copy { max-width:650px; }
.storytelling-hero-copy h1 { max-width:650px; margin-bottom:22px; font-size:clamp(52px,6.8vw,92px); }
.storytelling-hero-art { position:relative; display:flex; min-height:500px; align-items:center; justify-content:center; padding:35px 70px; border:1px solid rgba(123,45,58,.16); border-radius:34px; background-color:#f7f0ed; background-image:url('/assets/poeysia-storytelling-hero-background.png'); background-position:center; background-size:cover; box-shadow:0 24px 80px rgba(53,33,100,.1); }
.storytelling-hero-art > img { position:absolute; z-index:2; top:28px; right:28px; width:92px; height:92px; border-radius:23px; box-shadow:0 14px 28px rgba(53,33,100,.18); }
.storytelling-hero-glow { position:absolute; width:230px; height:230px; border-radius:50%; background:rgba(123,45,58,.12); filter:blur(30px); }
.storytelling-phone-card { position:relative; z-index:1; width:min(100%,270px); overflow:hidden; border:8px solid #211c24; border-radius:37px; background:#211c24; box-shadow:0 30px 60px rgba(33,28,36,.28); transform:rotate(3deg); }
.storytelling-phone-card img { display:block; width:100%; height:auto; }
.product-family-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:50px; align-items:center; padding:32px 38px; border:1px solid var(--line); border-radius:25px; background:rgba(255,255,255,.76); box-shadow:0 18px 70px rgba(53,33,100,.05); }
.product-family-card h2 { margin:0; font-size:clamp(28px,3vw,42px); }
.product-family-intro { max-width:520px; margin:20px 0 0; color:var(--muted); font-size:15px; line-height:1.6; }
.product-family-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.product-family-links a { display:grid; gap:7px; padding:18px 20px; border:1px solid var(--line); border-radius:18px; color:var(--ink); text-decoration:none; }
.product-family-links a:hover, .product-family-links a.active { border-color:rgba(123,45,58,.42); background:rgba(123,45,58,.05); }
.product-family-links strong { font-size:16px; }
.product-family-links span { color:var(--muted); font-size:13px; line-height:1.45; }
.storytelling-flow-section, .storytelling-showcase-section, .storytelling-explain-section, .storytelling-faq-section { margin-top:104px; }
.storytelling-section-heading { max-width:720px; }
.storytelling-section-heading h2 { max-width:690px; margin-bottom:15px; font-size:clamp(38px,5vw,66px); line-height:.98; }
.storytelling-section-heading > p:last-child { max-width:620px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.storytelling-flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.storytelling-flow-grid article { min-height:190px; padding:26px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.05); }
.storytelling-step-number { display:block; margin-bottom:26px; color:var(--plum); font-size:12px; font-weight:800; letter-spacing:.16em; }
.storytelling-flow-grid h3 { margin-bottom:8px; font-size:28px; letter-spacing:-.05em; }
.storytelling-flow-grid p { max-width:290px; margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
.storytelling-screenshot-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:30px; align-items:start; }
.storytelling-screenshot-grid figure { margin:0; }
.storytelling-screenshot-grid figure:nth-child(2), .storytelling-screenshot-grid figure:nth-child(4) { margin-top:38px; }
.storytelling-screenshot-grid img { display:block; width:100%; border:6px solid #211c24; border-radius:25px; background:#211c24; box-shadow:0 18px 38px rgba(53,33,100,.14); }
.storytelling-screenshot-grid figcaption { display:grid; gap:4px; padding:14px 4px 0; }
.storytelling-screenshot-grid figcaption strong { font-size:15px; }
.storytelling-screenshot-grid figcaption span { color:var(--muted); font-size:12px; line-height:1.4; }
.storytelling-explain-section { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:18px; }
.storytelling-explain-card, .storytelling-moment-card { padding:34px; border:1px solid var(--line); border-radius:27px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.05); }
.storytelling-explain-card h2 { max-width:680px; margin-bottom:15px; font-size:clamp(32px,4vw,54px); line-height:1; }
.storytelling-explain-card > p:not(.eyebrow) { max-width:620px; margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.storytelling-explain-list { display:grid; gap:0; margin-top:28px; }
.storytelling-explain-list div { display:flex; gap:17px; padding:15px 0; border-top:1px solid var(--line); }
.storytelling-explain-list b { color:var(--plum); font-size:12px; }
.storytelling-explain-list span { color:var(--muted); font-size:14px; line-height:1.45; }
.storytelling-moment-card { background-color:#f7f0ed; background-image:url('/assets/poeysia-storytelling-hero-background.png'); background-position:center; background-size:cover; }
.storytelling-moment-card h3 { margin:32px 0 22px; color:#fff; font-family:Georgia,serif; font-size:clamp(30px,3vw,44px); line-height:1; }
.storytelling-moment-card ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; color:rgba(255,255,255,.88); font-size:14px; line-height:1.45; }
.storytelling-moment-card li { padding-top:13px; border-top:1px solid rgba(255,255,255,.3); }
.storytelling-faq-list { max-width:900px; margin-top:30px; border-top:1px solid var(--line); }
.storytelling-faq-list details { border-bottom:1px solid var(--line); }
.storytelling-faq-list summary { display:flex; justify-content:space-between; gap:20px; padding:22px 4px; cursor:pointer; list-style:none; font-size:18px; font-weight:750; }
.storytelling-faq-list summary::-webkit-details-marker { display:none; }
.storytelling-faq-list summary::after { content:'+'; color:var(--plum); font-size:24px; font-weight:400; }
.storytelling-faq-list details[open] summary::after { content:'−'; }
.storytelling-faq-list details p { max-width:760px; margin:0; padding:0 45px 22px 4px; color:var(--muted); font-size:15px; line-height:1.6; }
.storytelling-closing-cta { margin-top:104px; margin-bottom:20px; padding:62px 9%; border-radius:30px; background:#7b2d3a; color:#fff; text-align:center; }
.storytelling-closing-cta > img { display:block; width:72px; height:72px; margin:0 auto 22px; border-radius:18px; }
.storytelling-closing-cta .eyebrow { color:#f0cbd1; }
.storytelling-closing-cta h2 { max-width:820px; margin:0 auto 14px; font-family:Georgia,serif; font-size:clamp(42px,6vw,74px); line-height:.98; }
.storytelling-closing-cta h2 em { color:#f0cbd1; font-style:normal; }
.storytelling-closing-cta p:not(.eyebrow) { max-width:620px; margin:0 auto; color:rgba(255,255,255,.8); font-size:17px; line-height:1.55; }
.storytelling-closing-cta .hero-actions { justify-content:center; margin-top:27px; }
.storytelling-cta-secondary { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); }
.storytelling-cta-secondary:hover { background:rgba(255,255,255,.2); }
[data-theme="dark"] .product-family-card, [data-theme="dark"] .storytelling-flow-grid article, [data-theme="dark"] .storytelling-explain-card { background:var(--surface); }
[data-theme="dark"] .storytelling-hero-art, [data-theme="dark"] .storytelling-moment-card { background-color:#29232a; }
@media (max-width:900px) { .storytelling-hero { grid-template-columns:1fr; gap:32px; } .storytelling-hero-copy { max-width:720px; } .storytelling-hero-art { max-width:720px; width:100%; min-height:480px; margin:0 auto; } .product-family-card, .storytelling-explain-section { grid-template-columns:1fr; gap:25px; } .storytelling-screenshot-grid { grid-template-columns:repeat(3,1fr); } .storytelling-screenshot-grid figure:nth-child(4), .storytelling-screenshot-grid figure:nth-child(5) { margin-top:38px; } }
@media (max-width:700px) { .storytelling-hero { min-height:0; padding:24px 0 42px; } .storytelling-hero-copy h1 { font-size:clamp(48px,14vw,74px); } .storytelling-hero-art { min-height:400px; padding:30px 44px; } .storytelling-hero-art > img { top:20px; right:20px; width:72px; height:72px; border-radius:18px; } .product-family-card { padding:25px 22px; } .product-family-links { grid-template-columns:1fr; } .storytelling-flow-section, .storytelling-showcase-section, .storytelling-explain-section, .storytelling-faq-section { margin-top:70px; } .storytelling-flow-grid { grid-template-columns:1fr; } .storytelling-flow-grid article { min-height:0; } .storytelling-screenshot-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .storytelling-screenshot-grid figure:nth-child(2), .storytelling-screenshot-grid figure:nth-child(4), .storytelling-screenshot-grid figure:nth-child(5) { margin-top:26px; } .storytelling-explain-card, .storytelling-moment-card { padding:26px 22px; } .storytelling-closing-cta { margin-top:70px; padding:48px 24px; } }

/* PoeysiaPRO homepage product story. */
.home-atf { display:grid; min-height:0; padding:42px 0 70px; }
.home-atf:not(.desktop-app-atf) { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:44px; row-gap:34px; align-items:center; }
.home-atf-heading { max-width:900px; margin:0 0 30px; }
.home-atf:not(.desktop-app-atf) .home-atf-heading { grid-column:1; grid-row:1; max-width:620px; margin:0; }
.home-atf-heading h1 { max-width:900px; margin-bottom:20px; font-size:clamp(56px,5.3vw,82px); }
.home-atf-heading h1 em { color:var(--ink); }
.home-atf-heading .lead { max-width:680px; margin-bottom:18px; font-size:20px; }
.home-atf-download { color:var(--muted); font-size:13px; }
.home-atf-download:hover { color:var(--violet-dark); }
.home-atf-header-art { grid-column:2; grid-row:1; width:min(100%,760px); justify-self:end; margin:6px 0 8px; transform:rotate(2.2deg); transform-origin:center; }
.home-atf-header-art img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:24px; box-shadow:0 18px 55px rgba(53,33,100,.1); }
.home-atf:not(.desktop-app-atf) .home-tool-matrix-grid, .home-atf:not(.desktop-app-atf) .home-atf-visual { grid-column:1 / -1; }
.home-tool-matrix-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.home-tool-matrix-card { display:flex; min-height:560px; flex-direction:column; justify-content:flex-start; gap:22px; overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:0 12px 42px rgba(24,22,31,.04); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.home-tool-matrix-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--ink) 28%,var(--line)); box-shadow:0 18px 50px rgba(24,22,31,.08); }
.home-tool-matrix-card-featured { background:var(--surface-solid); }
.home-tool-matrix-meta { display:flex; align-items:center; justify-content:space-between; gap:15px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.home-tool-matrix-meta span:only-child { margin-left:auto; }
.home-tool-matrix-card h3 { max-width:100%; margin:0 0 13px; font-size:clamp(30px,3.7vw,52px); line-height:.96; letter-spacing:-.06em; overflow-wrap:anywhere; }
.home-tool-matrix-card p { max-width:410px; margin:0; color:var(--muted); font-size:14px; line-height:1.58; }
.home-tool-matrix-card > div:nth-child(2) { min-height:164px; }
.home-tool-matrix-art { flex:0 0 228px; width:calc(100% + 48px); margin:0 -24px; background-color:#f8f7fb; background-repeat:no-repeat; background-size:300% auto; background-position:0 center; border-top:1px solid rgba(112,74,255,.08); border-bottom:1px solid rgba(112,74,255,.08); }
.home-tool-matrix-art-clips { background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-position:0 center; }
.home-tool-matrix-art-carousel { background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-position:50% center; }
.home-tool-matrix-art-cutout { background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-position:100% center; }
.home-tool-matrix-art-seamlesspano { background-image:url('/assets/home-tool-seamlesspano-tile-comic-v2.png'); background-position:center; background-size:cover; }
.home-tool-matrix-link { display:inline-flex; align-items:center; gap:12px; margin-top:auto; color:var(--violet-dark); font-size:13px; font-weight:800; }
.home-tool-matrix-link span { font-size:18px; line-height:1; }
.home-tools-rebuild { margin-top:32px; }
.home-tools-rebuild h2 { margin:0; text-align:center; font-size:clamp(54px,7vw,96px); line-height:.92; letter-spacing:-.075em; }
.home-tools-journey { max-width:1160px; margin:0 auto; }
.home-tools-journey .composer-journey { margin-top:56px; }
.home-tools-journey .composer-journey-step { min-height:420px; align-items:start; }
.home-tools-journey .composer-journey-copy .eyebrow { margin-bottom:18px; color:var(--ink); font-size:clamp(30px,4vw,56px); font-weight:850; letter-spacing:-.06em; line-height:.95; }
.home-tools-journey .composer-journey-copy > p:not(.eyebrow) { max-width:500px; color:var(--muted); font-size:18px; line-height:1.55; }
.home-tools-placeholder { display:grid; place-items:center; width:min(100%,420px); aspect-ratio:4 / 3; margin:0 auto; border:1px dashed color-mix(in srgb,var(--violet) 42%,var(--line)); border-radius:24px; background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 9%,var(--page)),color-mix(in srgb,#efb56b 10%,var(--page))); color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.16em; text-align:center; }
.home-tools-journey-media img { display:block; width:min(100%,420px); aspect-ratio:4 / 3; margin:0 auto; border-radius:24px; object-fit:cover; }
.home-tools-more { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--violet); font-size:16px; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.home-tools-more span { font-size:22px; font-weight:500; line-height:1; transition:transform .18s ease; }
.home-tools-more:hover { color:var(--violet-dark); }
.home-tools-more:hover span { transform:translateX(4px); }
.home-transformations { padding-top:4px; }
.home-transformations-heading { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr); gap:60px; align-items:end; margin-bottom:42px; }
.home-transformations-heading h2 { max-width:760px; margin:0; font-size:clamp(42px,6vw,82px); line-height:.94; letter-spacing:-.075em; }
.home-transformations-heading > p { max-width:420px; margin:0 0 6px; color:var(--muted); font-size:18px; line-height:1.5; }
.home-transformations-list { display:grid; gap:0; }
.home-transformation { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:38px; align-items:center; padding:34px 0; border-top:1px solid var(--line); }
.home-transformation-copy { max-width:430px; }
.home-transformation-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 20px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.home-transformation-kicker span { color:var(--violet); }
.home-transformation-copy h3 { max-width:470px; margin:0 0 16px; font-size:clamp(34px,4.2vw,60px); line-height:.96; letter-spacing:-.07em; }
.home-transformation-copy h3 em { color:var(--violet); font-style:normal; }
.home-transformation-copy > p:last-child { max-width:390px; margin:0; color:var(--muted); font-size:15px; line-height:1.58; }
.home-transformation-visual { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:var(--surface-solid); box-shadow:0 18px 70px rgba(53,33,100,.06); }
.home-source-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.home-source-label span:first-child { color:var(--ink); }
.home-recording-visual { display:grid; grid-template-columns:minmax(230px,1.14fr) 30px minmax(180px,.86fr); gap:20px; align-items:center; min-height:320px; padding:28px; }
.home-source-media { min-width:0; padding:15px; border:1px solid rgba(112,74,255,.16); border-radius:21px; background:var(--surface-solid); box-shadow:0 14px 34px rgba(44,31,85,.1); }
.home-recording-source { transform:rotate(-1.3deg); }
.home-recording-frame { overflow:hidden; aspect-ratio:16/9; border-radius:13px; background:#1b1a22; }
.home-recording-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; }
.home-recording-timeline { position:relative; height:27px; margin-top:11px; overflow:hidden; border-radius:7px; background:rgba(99,55,255,.08); }
.home-recording-timeline::before { content:""; position:absolute; inset:7px 0; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(99,55,255,.28) 3px 5px,transparent 5px 8px); clip-path:polygon(0 44%,4% 22%,8% 67%,12% 30%,16% 75%,20% 18%,24% 58%,28% 35%,32% 77%,36% 31%,40% 64%,44% 24%,48% 70%,52% 34%,56% 74%,60% 28%,64% 57%,68% 20%,72% 70%,76% 38%,80% 66%,84% 24%,88% 56%,92% 31%,96% 67%,100% 37%,100% 100%,0 100%); }
.home-recording-timeline span { position:absolute; z-index:1; inset:0 auto 0 38%; width:2px; background:var(--violet); box-shadow:0 0 0 5px rgba(99,55,255,.1); }
.home-recording-timeline i { position:absolute; z-index:2; top:50%; left:calc(38% - 5px); width:12px; height:12px; border:2px solid var(--surface-solid); border-radius:50%; background:var(--violet); transform:translateY(-50%); }
.home-transformation-arrow { color:var(--violet); font-size:28px; font-weight:500; line-height:1; text-align:center; }
.home-clip-stack { position:relative; display:flex; min-height:244px; align-items:center; justify-content:center; padding-right:16px; }
.home-vertical-clip { position:absolute; display:flex; width:92px; aspect-ratio:9/16; flex-direction:column; justify-content:space-between; padding:10px 8px; overflow:hidden; border:3px solid var(--surface-solid); border-radius:14px; background-color:#20213a; background-image:url('/assets/poeysia-pro-header-all-modes-v6-modern-comic.png'); background-repeat:no-repeat; background-size:auto 100%; box-shadow:0 15px 28px rgba(34,25,64,.22); color:#fff; }
.home-vertical-clip::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,13,26,.1),rgba(14,13,26,.7)); }
.home-vertical-clip span, .home-vertical-clip strong { position:relative; z-index:1; font-size:8px; letter-spacing:.12em; }
.home-vertical-clip strong { align-self:flex-start; font-size:10px; letter-spacing:.06em; }
.home-vertical-clip-one { z-index:1; margin-left:-122px; transform:rotate(-9deg) translateY(8px); background-position:12% center; }
.home-vertical-clip-two { z-index:2; margin-left:0; transform:rotate(2deg) translateY(-5px); background-position:42% center; }
.home-vertical-clip-three { z-index:3; margin-left:122px; transform:rotate(9deg) translateY(8px); background-position:72% center; }
.home-transformation-website { grid-template-columns:minmax(0,1.28fr) minmax(240px,.72fr); }
.home-transformation-website .home-transformation-visual { order:1; }
.home-transformation-website .home-transformation-copy { order:2; }
.home-website-visual { display:grid; grid-template-columns:minmax(210px,.82fr) 30px minmax(300px,1.18fr); gap:20px; align-items:center; min-height:330px; padding:28px; }
.home-website-source { min-width:0; overflow:hidden; border:1px solid rgba(23,23,27,.16); border-radius:16px; background:var(--surface-solid); box-shadow:0 16px 28px rgba(34,25,64,.16); transform:rotate(-3deg); }
.home-browser-top { display:flex; align-items:center; gap:10px; height:24px; padding:0 10px; border-bottom:1px solid var(--line); color:var(--muted); font-size:8px; letter-spacing:.05em; }
.home-browser-dots { display:flex; gap:4px; }
.home-browser-dots i { display:block; width:5px; height:5px; border-radius:50%; background:#ff5f57; opacity:.82; }
.home-browser-dots i:nth-child(2) { background:#f1b327; }
.home-browser-dots i:nth-child(3) { background:#1d9d75; }
.home-website-page { padding:15px; }
.home-website-page-copy { display:flex; flex-direction:column; gap:10px; padding:8px 2px 15px; }
.home-website-page-copy span { color:var(--violet); font-size:8px; font-weight:800; letter-spacing:.13em; }
.home-website-page-copy strong { font-size:clamp(18px,2.2vw,31px); line-height:.93; letter-spacing:-.065em; }
.home-website-page-copy i { display:block; width:72%; height:5px; border-radius:99px; background:var(--line); box-shadow:0 10px 0 var(--line),0 20px 0 color-mix(in srgb,var(--line) 70%,transparent); }
.home-website-page-art { aspect-ratio:1.3; border-radius:9px; background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-repeat:no-repeat; background-size:300% auto; background-position:50% center; }
.home-carousel-output { position:relative; min-height:258px; }
.home-carousel-slide { position:absolute; display:flex; width:126px; aspect-ratio:4/5; flex-direction:column; justify-content:space-between; padding:13px; overflow:hidden; border:5px solid var(--surface-solid); border-radius:8px; background-color:#232039; background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-repeat:no-repeat; background-size:auto 100%; box-shadow:0 16px 28px rgba(34,25,64,.2); color:#fff; }
.home-carousel-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,35,.05),rgba(20,16,35,.68)); }
.home-carousel-slide span, .home-carousel-slide strong { position:relative; z-index:1; font-size:8px; letter-spacing:.12em; }
.home-carousel-slide strong { max-width:85px; font-size:10px; line-height:1.05; letter-spacing:.04em; }
.home-carousel-slide-one { z-index:1; top:17px; left:0; transform:rotate(-12deg); background-position:13% center; }
.home-carousel-slide-two { z-index:2; top:4px; left:72px; transform:rotate(-4deg); background-position:31% center; }
.home-carousel-slide-three { z-index:3; top:1px; left:144px; transform:rotate(4deg); background-position:55% center; }
.home-carousel-slide-four { z-index:4; top:17px; left:216px; transform:rotate(12deg); background-position:77% center; }
.home-transformation-image .home-transformation-visual { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(260px,1.1fr); gap:24px; align-items:center; min-height:330px; padding:28px; }
.home-image-source { min-width:0; padding:15px; border:1px solid rgba(112,74,255,.15); border-radius:20px; background:var(--surface-solid); box-shadow:0 14px 30px rgba(44,31,85,.1); transform:rotate(2deg); }
.home-image-source-art { overflow:hidden; aspect-ratio:1.05; border-radius:12px; background:#1c1a25; }
.home-image-source-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:94% center; }
.home-image-branches { position:relative; display:grid; gap:15px; padding-left:28px; }
.home-image-branches::before { content:""; position:absolute; top:17%; bottom:17%; left:0; width:30px; border-top:1px solid color-mix(in srgb,var(--violet) 55%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--violet) 55%,var(--line)); border-left:1px solid color-mix(in srgb,var(--violet) 55%,var(--line)); border-radius:18px 0 0 18px; }
.home-image-outcome { position:relative; display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:center; min-height:112px; padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.68); }
.home-image-outcome::before { content:"→"; position:absolute; left:-25px; color:var(--violet); font-size:19px; }
.home-image-outcome span { color:var(--ink); font-size:10px; font-weight:800; letter-spacing:.08em; }
.home-image-outcome span b { color:var(--violet); font-size:15px; }
.home-cutout-art { width:84px; height:84px; border-radius:14px; background-color:#f8f8fb; background-image:linear-gradient(45deg,rgba(99,55,255,.08) 25%,transparent 25%,transparent 75%,rgba(99,55,255,.08) 75%),linear-gradient(45deg,rgba(99,55,255,.08) 25%,transparent 25%,transparent 75%,rgba(99,55,255,.08) 75%); background-position:0 0,8px 8px; background-size:16px 16px; }
.home-cutout-art::after { content:""; display:block; width:100%; height:100%; background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-repeat:no-repeat; background-size:auto 230%; background-position:94% 62%; clip-path:polygon(20% 7%,51% 0,82% 12%,94% 43%,81% 76%,52% 94%,19% 84%,5% 47%); }
.home-pano-art { width:84px; height:84px; border-radius:14px; background-image:url('/assets/home-tool-seamlesspano-v7-modern-comic.png'); background-size:cover; background-position:center; }
[data-theme="dark"] .home-transformation-visual { box-shadow:none; }
[data-theme="dark"] .home-image-outcome { background:rgba(28,28,34,.82); }

/* The homepage middle section explains the four products with the same split rhythm
   used by the Composer and Cutout workflow pages. */
.home-tool-guide { max-width:1360px; margin-right:auto; margin-left:auto; padding-top:0; }
.home-tool-guide-list { border-top:1px solid var(--line); }
.home-tool-guide-row { display:grid; grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr); gap:clamp(48px,6vw,96px); align-items:center; padding:clamp(68px,6.5vw,96px) 0; border-bottom:1px solid var(--line); }
.home-tool-guide-row-reverse { grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr); }
.home-tool-guide-row-reverse .home-tool-guide-copy { order:2; }
.home-tool-guide-row-reverse .home-tool-guide-visual { order:1; }
.home-tool-guide-copy { max-width:470px; }
.home-tool-guide-copy h3 { max-width:540px; margin:0; font-size:clamp(42px,4.1vw,66px); line-height:.94; letter-spacing:-.075em; }
.home-tool-guide-copy .text-link { min-height:34px; margin-top:24px; font-size:13px; }
.home-tool-guide-visual { min-width:0; width:100%; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.home-tool-guide-visual .home-transformation-arrow { color:var(--violet); font-size:22px; }
.home-tool-guide-visual.home-recording-visual { display:grid; grid-template-columns:minmax(0,1.14fr) 24px minmax(190px,.86fr); gap:clamp(18px,2.5vw,34px); align-items:center; min-height:0; padding:0; }
.home-tool-guide-visual .home-source-media { min-width:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; }
.home-recording-frame { aspect-ratio:16/9; }
.home-clip-stack { min-height:270px; padding:0; }
.home-tool-guide-visual.home-website-visual { display:grid; grid-template-columns:minmax(0,.86fr) 24px minmax(280px,1.14fr); gap:clamp(18px,2.5vw,34px); align-items:center; min-height:0; padding:0; }
.home-tool-guide-visual .home-website-source { box-shadow:none; transform:none; }
.home-carousel-output { min-height:280px; }
.home-cutout-guide-visual { display:grid; grid-template-columns:minmax(170px,.88fr) 24px minmax(250px,1.12fr); gap:clamp(18px,2.5vw,34px); align-items:center; min-height:0; padding:0; }
.home-cutout-guide-input { min-width:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; }
.home-cutout-guide-image { aspect-ratio:1.25; border-radius:14px; }
.home-cutout-guide-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:94% center; }
.home-cutout-guide-output { display:grid; grid-template-columns:minmax(150px,.95fr) minmax(0,1.05fr); gap:clamp(14px,2.2vw,28px); align-items:center; min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
.home-cutout-guide-output > div:last-child { min-width:0; }
.home-cutout-guide-output > div:last-child span, .home-seamless-guide-output-copy span { display:block; margin-bottom:8px; color:var(--violet); font-size:9px; font-weight:850; letter-spacing:.13em; }
.home-cutout-guide-output strong, .home-seamless-guide-output-copy strong { display:block; font-size:17px; line-height:1.04; letter-spacing:-.04em; }
.home-cutout-art { width:100%; max-width:220px; height:auto; aspect-ratio:1; border-radius:14px; }
.home-seamless-guide-visual { display:grid; grid-template-columns:minmax(180px,.86fr) 24px minmax(250px,1.14fr); gap:clamp(18px,2.5vw,34px); align-items:center; min-height:0; padding:0; }
.home-seamless-guide-input { min-width:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; }
.home-seamless-guide-source-art { aspect-ratio:1.55; border-radius:14px; }
.home-seamless-guide-source-art img { display:block; width:100%; height:100%; object-fit:cover; }
.home-seamless-guide-output { min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
.home-seamless-guide-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; overflow:hidden; aspect-ratio:1.9; margin-bottom:18px; border-radius:11px; background:var(--surface-solid); }
.home-seamless-guide-panels span { min-width:0; background-image:url('/assets/home-tool-seamlesspano-v7-modern-comic.png'); background-repeat:no-repeat; background-size:300% auto; }
.home-seamless-guide-panels span:nth-child(1) { background-position:0 center; }
.home-seamless-guide-panels span:nth-child(2) { background-position:50% center; }
.home-seamless-guide-panels span:nth-child(3) { background-position:100% center; }
.home-seamless-guide-output-copy strong { font-size:20px; }
.home-atf-visual { max-width:980px; width:100%; margin:34px auto 0; }
[data-theme="dark"] .home-tool-matrix-card { box-shadow:none; }
.desktop-app-atf { display:grid; grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr); gap:54px; align-items:center; min-height:620px; padding:54px 0 86px; }
.desktop-app-atf .home-atf-heading { max-width:500px; margin:0; }
.desktop-app-atf .home-atf-heading h1 { max-width:520px; }
.desktop-app-atf .home-atf-heading .lead { max-width:470px; }
.desktop-app-atf .home-atf-visual { max-width:none; margin:0; }
.desktop-app-atf .hero-actions { margin-top:24px; }
body[data-seo-page="desktop-app"] #marketing-page { display:none !important; }
body[data-seo-page="desktop-app"] #desktop-app-page { display:block !important; }
.home-foundation { padding-top:22px; }
.home-foundation-tile { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:34px; overflow:hidden; padding:62px; border:1px solid rgba(188,168,255,.18); border-radius:34px; background:linear-gradient(120deg,#21162a,#172c31 58%,#6d3b34); box-shadow:0 26px 90px rgba(53,33,100,.15); color:#fff; }
.home-foundation-tile::after { content:''; position:absolute; z-index:-1; top:-230px; right:19%; width:450px; height:450px; border:1px solid rgba(255,255,255,.11); border-radius:50%; box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.016); }
.home-foundation-copy { display:flex; flex-direction:column; justify-content:center; }
.home-foundation-copy .eyebrow { color:#bca8ff; }
.home-foundation-copy h2 { max-width:660px; margin-bottom:22px; font-size:clamp(45px,5.7vw,74px); }
.home-foundation-copy > p:not(.eyebrow) { max-width:650px; margin:0; color:rgba(255,255,255,.7); font-size:16px; line-height:1.62; }
.home-principle-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:38px; border-top:1px solid rgba(255,255,255,.16); }
.home-principle-grid div { padding:22px 18px 0 0; }
.home-principle-grid div + div { padding-left:18px; border-left:1px solid rgba(255,255,255,.16); }
.home-principle-grid span, .upcoming-number { display:block; margin-bottom:30px; color:#bca8ff; font-size:10px; font-weight:850; letter-spacing:.12em; }
.home-principle-grid strong, .home-principle-grid small { display:block; }
.home-principle-grid strong { margin-bottom:7px; color:#fff; font-size:15px; line-height:1.3; }
.home-principle-grid small { color:rgba(255,255,255,.55); font-size:11px; line-height:1.5; }
.home-ai-choice { align-self:center; overflow:hidden; padding:12px; border:1px solid rgba(255,255,255,.16); border-radius:25px; background:rgba(12,15,24,.4); backdrop-filter:blur(14px); }
.home-ai-choice-heading { padding:16px 15px 18px; }
.home-ai-choice-heading span, .home-ai-choice-heading strong { display:block; }
.home-ai-choice-heading span { margin-bottom:8px; color:#bca8ff; font-size:9px; font-weight:850; letter-spacing:.16em; }
.home-ai-choice-heading strong { max-width:380px; color:#fff; font-size:20px; line-height:1.2; letter-spacing:-.035em; }
.home-ai-option { display:grid; grid-template-columns:36px 1fr auto; gap:14px; align-items:start; min-height:150px; padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:17px; color:#fff; text-decoration:none; transition:border-color .18s ease,transform .18s ease,background .18s ease; }
.home-ai-option + .home-ai-option { margin-top:9px; }
.home-ai-option:hover { transform:translateY(-2px); border-color:rgba(188,168,255,.5); }
.home-ai-option-cloud { background:linear-gradient(135deg,rgba(99,55,255,.3),rgba(255,255,255,.055)); }
.home-ai-option-local { background:linear-gradient(135deg,rgba(145,228,181,.12),rgba(255,255,255,.045)); }
.home-ai-option-index { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#bca8ff; font-size:10px; font-weight:850; }
.home-ai-option small, .home-ai-option strong, .home-ai-option p { display:block; }
.home-ai-option small { margin-bottom:8px; color:#bca8ff; font-size:8px; font-weight:850; letter-spacing:.12em; }
.home-ai-option strong { color:#fff; font-size:17px; line-height:1.25; }
.home-ai-option p { margin:8px 0 0; color:rgba(255,255,255,.58); font-size:11px; line-height:1.45; }
.home-ai-option > b { align-self:center; color:#bca8ff; font-size:18px; }
.home-ai-option-local small, .home-ai-option-local > b { color:#a9f0c6; }
.home-tool-heading { max-width:860px; margin-bottom:32px; }
.home-tool-heading h2 { margin:0 0 17px; font-size:clamp(58px,8vw,108px); }
.home-tool-heading > p:last-child { max-width:650px; margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
.home-clips-tile { display:grid; grid-template-columns:minmax(0,1.24fr) minmax(340px,.76fr); gap:18px; padding:18px; border:1px solid var(--line); border-radius:31px; background:rgba(255,255,255,.72); box-shadow:0 22px 75px rgba(53,33,100,.07); }
.home-clips-visual { display:flex; min-width:0; flex-direction:column; margin:0; padding:12px; border:1px solid var(--line); border-radius:22px; background:var(--surface-solid); }
.home-clips-visual video { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:15px; background:#171522; }
.home-clips-visual figcaption { padding:12px 3px 1px; color:var(--muted); font-size:11px; }
.home-clips-copy { display:flex; flex-direction:column; justify-content:center; padding:42px 32px; }
.home-clips-copy h3 { max-width:470px; margin:0 0 18px; font-size:clamp(36px,4.4vw,60px); line-height:.96; letter-spacing:-.065em; }
.home-clips-copy > p:not(.eyebrow) { max-width:480px; margin:0; color:var(--muted); font-size:15px; line-height:1.58; }
.home-clips-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; margin:27px 0; padding:0; border-top:1px solid var(--line); list-style:none; }
.home-clips-features li { position:relative; padding:12px 0 12px 18px; border-bottom:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:750; line-height:1.35; }
.home-clips-features li::before { content:'✓'; position:absolute; left:0; color:var(--violet); font-weight:900; }
.home-clips-copy .button { align-self:flex-start; }
.upcoming-number { margin-bottom:22px; color:var(--violet); }
[data-theme="dark"] .home-clips-tile { background:var(--surface); box-shadow:none; }
[data-theme="dark"] .home-clips-visual { background:rgba(15,15,20,.6); }
@media (max-width:980px) {
  .desktop-app-atf { grid-template-columns:1fr; gap:30px; min-height:0; }
  .desktop-app-atf .home-atf-heading { max-width:700px; }
  .desktop-app-atf .home-atf-visual { max-width:740px; margin:0 auto; }
  .home-atf:not(.desktop-app-atf) { grid-template-columns:1fr; gap:30px; }
  .home-atf:not(.desktop-app-atf) .home-atf-heading, .home-atf-header-art { grid-column:1; grid-row:auto; }
  .home-atf-header-art { width:min(100%,740px); justify-self:center; margin:0 auto 8px; }
  .home-tool-matrix-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .home-tool-matrix-card { min-height:520px; padding:20px; border-radius:19px; }
  .home-tool-matrix-card h3 { font-size:clamp(27px,3.4vw,38px); }
  .home-tool-matrix-card > div:nth-child(2) { min-height:145px; }
  .home-tool-matrix-art { flex-basis:208px; width:calc(100% + 40px); margin-right:-20px; margin-left:-20px; background-size:300% auto; }
  .home-tool-matrix-art-seamlesspano { background-size:cover; }
  .home-transformations-heading { grid-template-columns:1fr; gap:14px; margin-bottom:30px; }
  .home-transformations-heading > p { margin:0; }
  .home-transformation { grid-template-columns:1fr; gap:24px; padding:30px 0; }
  .home-transformation-copy { max-width:700px; }
  .home-transformation-website .home-transformation-visual, .home-transformation-website .home-transformation-copy { order:initial; }
  .home-transformation-visual { max-width:900px; }
  .home-tool-guide-row, .home-tool-guide-row-reverse { grid-template-columns:1fr; gap:28px; padding:48px 0; }
  .home-tool-guide-row-reverse .home-tool-guide-copy, .home-tool-guide-row-reverse .home-tool-guide-visual { order:initial; }
  .home-tool-guide-copy { max-width:700px; }
  .home-tool-guide-visual { max-width:900px; }
  .home-foundation-tile { grid-template-columns:1fr; padding:48px; }
  .home-ai-choice { width:100%; }
  .home-clips-tile { grid-template-columns:1fr; }
  .home-clips-copy { padding:38px 30px; }
}
@media (max-width:700px) {
  .home-atf { padding:24px 0 48px; }
  .home-atf-heading { margin-bottom:24px; }
  .home-atf-heading h1 { font-size:clamp(48px,14vw,74px); }
  .home-atf-heading .lead { font-size:17px; }
  .home-atf-header-art { width:calc(100% - 8px); margin:0 auto 5px; transform:rotate(1.2deg); }
  .home-atf-header-art img { border-radius:18px; }
  .home-atf-visual { margin-top:26px; }
  .home-tool-matrix { padding-top:0; }
  .home-tool-matrix-heading { margin-bottom:22px; }
  .home-tool-matrix-heading h2 { font-size:clamp(40px,12vw,60px); }
  .home-tool-matrix-heading > p:last-child { font-size:15px; }
  .home-tool-matrix-grid { grid-template-columns:1fr; }
  .home-tool-matrix-card-featured { grid-column:auto; }
  .home-tool-matrix-card { min-height:500px; padding:23px 20px; border-radius:20px; }
  .home-tool-matrix-card > div:nth-child(2) { min-height:0; }
  .home-tool-matrix-art { flex-basis:190px; width:calc(100% + 40px); margin-right:-20px; margin-left:-20px; background-size:cover; background-position:center; }
  .home-tool-matrix-art-clips { background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-position:0 center; background-size:300% auto; }
  .home-tool-matrix-art-carousel { background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-position:50% center; background-size:300% auto; }
  .home-tool-matrix-art-cutout { background-image:url('/assets/home-tool-panorama-v5-modern-comic.png'); background-position:100% center; background-size:300% auto; }
  .home-transformations { padding-top:0; }
  .home-transformations-heading h2 { font-size:clamp(43px,12.5vw,66px); }
  .home-transformations-heading > p { font-size:16px; }
  .home-transformation { gap:20px; padding:25px 0; }
  .home-transformation-copy h3 { font-size:clamp(35px,10vw,54px); }
  .home-transformation-visual { border-radius:22px; }
  .home-tool-guide-visual.home-recording-visual, .home-tool-guide-visual.home-website-visual, .home-transformation-image .home-transformation-visual { grid-template-columns:1fr; gap:15px; padding:0; }
  .home-transformation-arrow { transform:rotate(90deg); }
  .home-tool-guide { margin-top:54px; }
  .home-tool-guide-row, .home-tool-guide-row-reverse { gap:24px; padding:38px 0; }
  .home-tool-guide-copy h3 { font-size:clamp(37px,11vw,54px); }
  .home-tool-guide-visual { border-radius:22px; }
  .home-clip-stack { min-height:220px; padding:0; }
  .home-vertical-clip { width:82px; }
  .home-vertical-clip-one { margin-left:-108px; }
  .home-vertical-clip-three { margin-left:108px; }
  .home-carousel-output { min-height:225px; width:100%; }
  .home-carousel-slide { width:92px; }
  .home-carousel-slide-two { left:52px; }
  .home-carousel-slide-three { left:104px; }
  .home-carousel-slide-four { left:156px; }
  .home-image-branches { padding-left:22px; }
  .home-image-outcome { grid-template-columns:68px 1fr; min-height:96px; }
  .home-pano-art { width:68px; height:68px; }
  .home-cutout-guide-visual, .home-seamless-guide-visual { grid-template-columns:1fr; gap:12px; padding:0; }
  .home-cutout-guide-output { grid-template-columns:minmax(110px,.78fr) minmax(0,1.22fr); }
  .home-cutout-guide-output .home-cutout-art { display:block; width:100%; max-width:140px; height:auto; }
  .home-cutout-guide-image { aspect-ratio:1.35; }
  .home-seamless-guide-source-art { aspect-ratio:1.7; }
  .home-seamless-guide-panels { aspect-ratio:2.15; }
  .home-foundation { padding-top:0; }
  .home-foundation-tile { gap:28px; padding:32px 20px 20px; border-radius:25px; }
  .home-foundation-copy h2 { font-size:clamp(43px,12.5vw,60px); }
  .home-foundation-copy > p:not(.eyebrow) { font-size:15px; }
  .home-principle-grid { grid-template-columns:1fr; margin-top:30px; }
  .home-principle-grid div, .home-principle-grid div + div { padding:18px 0; border-left:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .home-principle-grid span { margin-bottom:12px; }
  .home-ai-choice { padding:8px; border-radius:19px; }
  .home-ai-option { grid-template-columns:32px 1fr; min-height:0; padding:17px 15px; }
  .home-ai-option > b { display:none; }
  .home-tool-heading { margin-bottom:22px; }
  .home-tool-heading h2 { font-size:clamp(64px,21vw,92px); }
  .home-tool-heading > p { font-size:15px; }
  .home-clips-tile { gap:8px; padding:8px; border-radius:23px; }
  .home-clips-visual { padding:7px; border-radius:17px; }
  .home-clips-copy { padding:30px 17px 23px; }
  .home-clips-copy h3 { font-size:clamp(38px,11vw,52px); }
  .home-clips-features { grid-template-columns:1fr; }
}

/* Canonical facts, methodology and comparison pages. */
.home-trust-facts { padding:34px 0 0; border-top:1px solid var(--line); }
.home-trust-facts-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:22px; }
.home-trust-facts-heading h2 { margin:0; font-size:clamp(30px,4vw,52px); }
.home-trust-facts-heading > p:last-child { max-width:360px; margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.home-trust-facts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.home-trust-facts-grid a { display:grid; gap:7px; min-height:112px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); text-decoration:none; }
.home-trust-facts-grid a:hover { border-color:rgba(99,55,255,.42); transform:translateY(-2px); }
.home-trust-facts-grid strong { font-size:16px; letter-spacing:-.03em; }
.home-trust-facts-grid span { color:var(--muted); font-size:12px; line-height:1.45; }
.facts-answer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.facts-answer-grid article { min-height:240px; padding:30px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.05); }
.facts-answer-grid article h2 { max-width:500px; font-size:clamp(28px,3.2vw,44px); }
.facts-answer-grid article p:not(.eyebrow) { max-width:560px; color:var(--muted); font-size:15px; line-height:1.6; }
.facts-definition-section, .comparison-table-section { max-width:1120px; margin-right:auto; margin-left:auto; }
.facts-definition-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 35px; margin:30px 0 0; border-top:1px solid var(--line); }
.facts-definition-grid div { display:grid; grid-template-columns:130px 1fr; gap:20px; padding:19px 0; border-bottom:1px solid var(--line); }
.facts-definition-grid dt { color:var(--violet); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.facts-definition-grid dd { display:grid; gap:7px; text-align:left; color:var(--muted); font-size:14px; line-height:1.55; }
.facts-definition-grid dd strong { color:var(--ink); font-size:17px; line-height:1.35; }
.facts-definition-grid dd small, .facts-qa-list small { color:var(--muted); font-size:12px; line-height:1.5; }
.facts-answer-list { max-width:920px; margin-right:auto; margin-left:auto; }
.facts-qa-list { margin-top:30px; border-top:1px solid var(--line); }
.facts-qa-list article { padding:22px 4px; border-bottom:1px solid var(--line); }
.facts-qa-list h3 { margin:0 0 7px; font-size:19px; letter-spacing:-.03em; }
.facts-qa-list p { max-width:780px; margin:0 0 9px; color:var(--muted); font-size:15px; line-height:1.55; }
.facts-qa-list a, .comparison-sources a { color:var(--violet-dark); font-size:13px; font-weight:750; text-decoration:none; }
.editorial-closing-cta { padding:65px 9%; border-radius:28px; background:var(--violet); color:#fff; text-align:center; }
.editorial-closing-cta h2 { max-width:760px; margin:0 auto 15px; font-size:clamp(38px,5vw,66px); }
.editorial-closing-cta p:not(.eyebrow) { max-width:620px; margin:0 auto; color:rgba(255,255,255,.78); font-size:16px; line-height:1.55; }
.editorial-closing-cta .hero-actions { justify-content:center; margin-top:25px; }
.own-ai-disclaimer-note { max-width:760px; margin:18px auto 0 !important; color:rgba(255,255,255,.62) !important; font-size:12px !important; line-height:1.5 !important; text-align:center; }
.editorial-closing-cta .button-secondary, .comparison-conclusion .button-secondary, .article-conclusion .button-secondary { background:#fff; border-color:#fff; color:var(--plum); }
.editorial-closing-cta .button-secondary:hover, .comparison-conclusion .button-secondary:hover, .article-conclusion .button-secondary:hover { background:#fff; border-color:#fff; color:var(--violet-dark); }
.comparison-checked { max-width:720px; padding:13px 16px; border:1px solid rgba(99,55,255,.22); border-radius:13px; background:var(--soft); color:var(--muted); font-size:13px; line-height:1.5; }
.methodology-step-grid, .criteria-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.methodology-step-grid article, .criteria-grid article { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.methodology-step-grid article > span { display:block; margin-bottom:30px; color:var(--violet); font-size:11px; font-weight:800; letter-spacing:.15em; }
.methodology-step-grid h3 { margin:0 0 9px; font-size:21px; letter-spacing:-.04em; }
.methodology-step-grid p, .criteria-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.criteria-grid { grid-template-columns:repeat(3,1fr); margin-top:30px; }
.criteria-grid article { min-height:185px; }
.criteria-grid strong { display:flex; justify-content:space-between; gap:14px; margin-bottom:12px; font-size:16px; }
.criteria-grid strong span { color:var(--violet); }
.methodology-decision { max-width:820px; }
.methodology-decision h2 { max-width:780px; margin-bottom:18px; }
.methodology-decision-copy { max-width:680px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.score-comparison { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:60px; align-items:start; }
.editorial-copy { color:var(--muted); font-size:16px; line-height:1.65; }
.editorial-copy p:last-child { margin-bottom:0; }
.comparison-checked { color:var(--muted); }
.comparison-checked a { color:var(--violet-dark); font-weight:700; }
.comparison-hero-detail { max-width:720px; margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
.comparison-table td strong { color:var(--ink); }
.comparison-table td small { display:block; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.45; }
.comparison-volume-row { background:rgba(23,44,49,.045); }
.comparison-volume-row th, .comparison-volume-row td { border-bottom-color:var(--line); }
.comparison-local-note { max-width:850px; margin:15px 4px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.comparison-volume-callout { margin:24px 4px 18px; padding:3px 0 3px 14px; border-left:3px solid var(--violet); color:var(--ink); font-size:16px; line-height:1.45; }
.comparison-status-badge { display:inline-flex; align-items:center; margin-left:6px; padding:3px 6px; border:1px solid rgba(99,55,255,.35); border-radius:999px; color:var(--violet-dark); font-size:9px; font-weight:850; letter-spacing:.12em; line-height:1; vertical-align:middle; }
.comparison-publishing-note, .comparison-top-moments-note, .comparison-source-note { max-width:850px; margin:10px 4px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.comparison-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.05); }
.comparison-table { width:100%; min-width:860px; border-collapse:collapse; text-align:left; }
.comparison-table th, .comparison-table td { padding:17px 18px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px; line-height:1.5; }
.comparison-table thead th { color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom:0; }
.comparison-table tbody th { width:22%; color:var(--ink); font-size:14px; }
.comparison-table tbody td { color:var(--muted); }
.comparison-table tbody td:nth-child(2) { color:var(--ink); }
.score-comparison-copy { padding:28px; border:1px solid var(--line); border-radius:22px; background:var(--surface); color:var(--muted); font-size:15px; line-height:1.6; }
.score-comparison-copy article + article { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.score-comparison-copy h3 { margin:0 0 7px; color:var(--ink); font-size:20px; letter-spacing:-.03em; }
.score-comparison-copy article p { margin:0; }
.score-comparison-intro { max-width:520px; margin-top:18px; color:var(--muted); font-size:16px; line-height:1.6; }
.score-comparison-copy p:last-child { margin-bottom:0; }
.score-comparison-copy strong { color:var(--ink); }
.comparison-score-summary { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink); font-weight:700; }
.comparison-conclusion { max-width:1120px; margin-right:auto; margin-left:auto; padding:56px; border-radius:28px; background:linear-gradient(115deg,#21162a,#172c31 55%,#56342f); color:#fff; }
.comparison-conclusion .eyebrow { color:#bca8ff; }
.comparison-conclusion h2 { max-width:820px; margin:0 0 16px; color:#fff; font-size:clamp(38px,5vw,64px); line-height:.98; }
.comparison-conclusion > p:not(.eyebrow) { max-width:780px; margin:0; color:rgba(255,255,255,.7); font-size:17px; line-height:1.6; }
.comparison-conclusion .hero-actions { margin-top:28px; }
.comparison-sources { color:var(--muted); font-size:13px; line-height:1.55; }
.clips-family-product-banner { position:relative; overflow:hidden; isolation:isolate; border:1px solid var(--line); background-color:#f3ebdd; background-image:url('/assets/clips-foundation-banner-v1-modern-comic.png'); background-position:center; background-size:cover; box-shadow:0 26px 90px rgba(53,33,100,.08); color:var(--ink); text-align:center; }
.clips-family-product-banner > .eyebrow { position:relative; z-index:1; margin-bottom:12px; color:var(--violet-dark); }
.clips-family-banner-copy { position:relative; z-index:1; display:table; width:fit-content; max-width:calc(100% - 16px); margin:0 auto; padding:8px 14px 11px; border:1px solid rgba(23,24,27,.08); border-radius:15px; background-color:rgba(250,249,246,.96); background-image:radial-gradient(circle,rgba(23,24,27,.15) 1px,transparent 1.2px); background-size:15px 15px; box-shadow:0 10px 30px rgba(53,33,100,.06); }
.clips-family-banner-copy h2 { max-width:820px; margin:0 auto 14px; color:var(--ink); font-size:clamp(40px,6vw,74px); line-height:.98; }
.clips-family-banner-copy > p { max-width:680px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.55; }
.clips-family-product-banner .hero-actions { position:relative; z-index:1; justify-content:center; margin-top:26px; }
.clips-family-product-banner .button-light { background:var(--ink); color:#fff; }
.clips-family-product-banner .button-light:hover { background:var(--violet-dark); }
.clips-family-product-banner .button-secondary, .clips-family-product-banner .clips-cta-secondary { border-color:rgba(23,24,27,.12); background:rgba(255,255,255,.94); color:var(--ink); }
.clips-family-product-banner .button-secondary:hover, .clips-family-product-banner .clips-cta-secondary:hover { border-color:rgba(99,55,255,.25); background:#fff; color:var(--violet-dark); }
.clips-family-product-banner .own-ai-disclaimer-note { position:relative; z-index:1; color:var(--muted) !important; }
[data-theme="dark"] .home-trust-facts-grid a, [data-theme="dark"] .facts-answer-grid article, [data-theme="dark"] .methodology-step-grid article, [data-theme="dark"] .criteria-grid article, [data-theme="dark"] .comparison-table-wrap, [data-theme="dark"] .score-comparison-copy { background:var(--surface); }
[data-theme="dark"] .comparison-volume-row { background:rgba(145,228,181,.035); }
@media (max-width:900px) { .home-trust-facts-grid { grid-template-columns:repeat(2,1fr); } .methodology-step-grid, .criteria-grid { grid-template-columns:repeat(2,1fr); } .score-comparison { grid-template-columns:1fr; gap:24px; } .comparison-table-wrap { overflow:visible; } .comparison-table { min-width:0; } .comparison-table thead { display:none; } .comparison-table, .comparison-table tbody, .comparison-table tr { display:block; } .comparison-table tbody tr { padding:17px 18px; border-bottom:1px solid var(--line); } .comparison-table tbody tr:last-child { border-bottom:0; } .comparison-table tbody th, .comparison-table tbody td { display:block; width:auto; padding:0; border:0; } .comparison-table tbody th { margin-bottom:13px; font-size:14px; } .comparison-table tbody td { margin-top:13px; font-size:13px; } .comparison-table tbody td::before { display:block; margin-bottom:5px; color:var(--violet-dark); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .comparison-table tbody td:nth-child(2)::before { content:'PoeysiaPRO'; } .comparison-table tbody td:nth-child(3)::before { content:'OpusClip'; } }
@media (max-width:700px) { .home-trust-facts-heading, .facts-answer-grid, .facts-definition-grid { display:grid; grid-template-columns:1fr; gap:16px; } .home-trust-facts-grid, .methodology-step-grid, .criteria-grid { grid-template-columns:1fr; } .facts-definition-grid div { grid-template-columns:1fr; gap:7px; } .facts-answer-grid article { min-height:0; padding:24px 22px; } .comparison-table-wrap { border-radius:16px; } .comparison-table tbody tr { padding:16px; } .comparison-conclusion, .editorial-closing-cta { padding:48px 24px; } }

/* Clips workflow comparison. */
.clips-scorecard { max-width:1120px; margin-right:auto; margin-left:auto; }
.clips-scorecard .clips-section-heading { max-width:920px; }
.clips-scorecard .clips-section-heading > p:last-child { max-width:780px; }
.clips-score-grid { padding:10px; border-color:rgba(99,55,255,.14); background:rgba(237,231,255,.38); box-shadow:0 22px 70px rgba(53,33,100,.08); }
.clips-score-grid > div { grid-template-columns:minmax(190px,.78fr) minmax(250px,1fr) minmax(270px,1.08fr); gap:10px; padding:0; border:0; }
.clips-score-grid > div + div { margin-top:8px; }
.clips-score-grid > div:first-child { align-items:end; padding:8px 16px 12px; }
.clips-score-grid > div:not(.clips-score-label) > span,
.clips-score-grid .score-manual,
.clips-score-grid .score-good { display:flex; align-items:center; min-height:72px; padding:16px 18px; border-radius:15px; }
.clips-score-grid > div:not(.clips-score-label) > span { border:1px solid var(--line); background:var(--surface-solid); color:var(--ink); }
.clips-score-step i { display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; margin-right:12px; border-radius:50%; background:var(--soft); color:var(--violet); font-size:10px; font-style:normal; font-weight:800; letter-spacing:.06em; }
.clips-score-grid .score-manual { background:rgba(255,255,255,.52); color:var(--muted); font-weight:650; }
.clips-score-grid .score-good { border:1px solid rgba(99,55,255,.18); background:linear-gradient(135deg,rgba(237,231,255,.96),rgba(255,255,255,.82)); color:var(--violet-dark); font-weight:750; }
.clips-score-grid .score-check { display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; margin-right:11px; border-radius:50%; background:var(--violet); color:#fff; font-size:14px; font-weight:900; }
.clips-score-footer { display:flex; align-items:center; gap:28px; margin-top:22px; }
.clips-score-footer p { max-width:700px; margin:0; color:var(--muted); font-size:17px; line-height:1.55; }
[data-theme="dark"] .clips-score-grid { background:rgba(99,55,255,.1); }
[data-theme="dark"] .clips-score-grid > div:not(.clips-score-label) > span,
[data-theme="dark"] .clips-score-grid .score-manual { background:rgba(255,255,255,.045); }
[data-theme="dark"] .clips-score-grid .score-good { background:linear-gradient(135deg,rgba(74,48,137,.68),rgba(35,31,48,.94)); }
[data-theme="dark"] .clips-score-grid .score-good { border-color:rgba(188,168,255,.28); color:#d8d0ff; }
[data-theme="dark"] .clips-score-grid .score-poeysia-label { color:#bca8ff; }
@media (max-width:700px) {
  .clips-score-grid { padding:10px; }
  .clips-score-grid > div:not(.clips-score-label) { grid-template-columns:1fr; gap:8px; margin-top:0; padding:12px; border-bottom:1px solid var(--line); }
  .clips-score-grid > div:not(.clips-score-label):last-child { border-bottom:0; }
  .clips-score-grid > div:not(.clips-score-label) > span { min-height:0; padding:7px 4px 11px; border:0; background:transparent; }
  .clips-score-grid .score-manual,
  .clips-score-grid .score-good { position:relative; display:grid; grid-template-columns:1fr; gap:5px; min-height:0; padding:36px 16px 15px; }
  .clips-score-grid .score-manual::before,
  .clips-score-grid .score-good::before { content:attr(data-column-label); position:absolute; top:12px; left:16px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .clips-score-grid .score-good { grid-template-columns:28px 1fr; align-items:center; padding-top:34px; }
  .clips-score-grid .score-good::before { color:var(--violet); }
  .clips-score-grid .score-check { margin-right:0; }
  .clips-score-footer { align-items:flex-start; flex-direction:column; }
}

/* Interactive Clips pipeline. */
.clips-pipeline { --pipeline-progress:0%; position:relative; isolation:isolate; overflow:hidden; padding:22px 22px 24px; border:1px solid rgba(188,168,255,.18); border-radius:29px; background:linear-gradient(115deg,#21162a,#172c31 58%,#6d3b34); box-shadow:0 24px 80px rgba(53,33,100,.14); color:#fff; }
.clips-pipeline::before { content:''; position:absolute; z-index:-1; top:-210px; left:38%; width:420px; height:420px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.016); }
.clips-pipeline-meta { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; min-height:24px; color:rgba(255,255,255,.48); font-size:8px; font-weight:850; letter-spacing:.17em; }
.clips-pipeline-meta strong { color:#a9f0c6; font-size:9px; letter-spacing:.16em; text-align:center; transition:color .25s ease; }
.clips-pipeline-meta span:last-child { text-align:right; }
.clips-pipeline-track { position:absolute; z-index:0; top:130px; right:9.7%; left:9.7%; height:2px; border-radius:99px; background:rgba(255,255,255,.13); }
.clips-pipeline-track > span { position:relative; display:block; width:var(--pipeline-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,#8a6cff,#bca8ff 52%,#a9f0c6); box-shadow:0 0 20px rgba(188,168,255,.5); transition:width .72s cubic-bezier(.22,.8,.25,1); }
.clips-pipeline-track > span::after { display:none; }
.clips-workflow-flow { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin:14px 0 0; padding:0; list-style:none; }
.clips-workflow-flow li { min-width:0; }
.clips-pipeline-step { display:flex; width:100%; min-height:198px; flex-direction:column; align-items:center; padding:12px 10px 11px !important; border:1px solid #343642 !important; border-radius:18px !important; background:#151823 !important; color:#fff !important; box-shadow:0 13px 32px rgba(8,9,16,.2) !important; text-align:center; transition:border-color .25s ease,background .25s ease,transform .25s ease !important; }
.clips-pipeline-step:hover { border-color:#5c5478 !important; background:#1b1d2a !important; }
.clips-pipeline-number { display:block; margin-bottom:16px; color:rgba(255,255,255,.42); font-size:9px; font-weight:850; letter-spacing:.13em; transition:color .25s ease; }
.clips-pipeline-node { position:relative; display:flex; width:64px; height:64px; flex:0 0 64px; align-items:center; justify-content:center; margin-bottom:18px; border:1px solid #454452; border-radius:19px; background:#0f121c; color:#bca8ff; box-shadow:0 12px 35px rgba(8,9,16,.24); transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.25,1); }
.clips-pipeline-step > strong { display:block; max-width:190px; color:rgba(255,255,255,.7); font-size:14px; line-height:1.3; transition:color .25s ease,transform .25s ease; }
.clips-pipeline-step > small { display:block; max-width:190px; max-height:0; margin-top:0; overflow:hidden; color:rgba(255,255,255,.54); font-size:10px; line-height:1.45; opacity:0; transform:translateY(5px); transition:max-height .3s ease,margin .3s ease,opacity .25s ease,transform .3s ease; }
.clips-workflow-flow li.is-active .clips-pipeline-step { border-color:#7663bb !important; background:linear-gradient(145deg,#2d2450,#192d32) !important; transform:translateY(-3px); }
.clips-workflow-flow li.is-active .clips-pipeline-number { color:#bca8ff; }
.clips-workflow-flow li.is-active .clips-pipeline-node { border-color:#a28cff; background:linear-gradient(145deg,#5235b3,#172d32); box-shadow:0 0 0 7px rgba(124,92,255,.11),0 18px 46px rgba(10,8,22,.35),0 0 34px rgba(188,168,255,.18); transform:scale(1.08); }
.clips-workflow-flow li.is-active .clips-pipeline-step > strong { color:#fff; transform:translateY(-1px); }
.clips-workflow-flow li.is-active .clips-pipeline-step > small { max-height:48px; margin-top:8px; opacity:1; transform:none; }
.clips-pipeline-node-video i { display:block; width:29px; height:36px; border:2px solid currentColor; border-radius:6px; }
.clips-pipeline-node-video i::after { content:''; display:block; width:0; height:0; margin:11px auto 0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
.clips-pipeline-node-transcript { gap:4px; }
.clips-pipeline-node-transcript i { display:block; width:3px; height:18px; border-radius:99px; background:currentColor; }
.clips-pipeline-node-transcript i:nth-child(2), .clips-pipeline-node-transcript i:nth-child(4) { height:34px; }
.clips-pipeline-node-transcript i:nth-child(3) { height:25px; }
.clips-pipeline-node-ai { font-size:31px; text-shadow:0 0 22px rgba(188,168,255,.7); }
.clips-pipeline-node-review i { position:absolute; width:31px; height:39px; border:1px solid currentColor; border-radius:7px; background:rgba(99,55,255,.16); }
.clips-pipeline-node-review i:first-child { transform:translateX(-11px) rotate(-8deg); opacity:.55; }
.clips-pipeline-node-review i:nth-child(2) { z-index:1; background:rgba(99,55,255,.3); }
.clips-pipeline-node-review i:last-child { transform:translateX(11px) rotate(8deg); opacity:.75; }
.clips-pipeline-node-export i { display:block; width:25px; height:39px; border:2px solid currentColor; border-radius:7px; }
.clips-pipeline-node-export b { position:absolute; right:13px; bottom:11px; display:grid; width:21px; height:21px; place-items:center; border-radius:50%; background:#a9f0c6; color:#172c31; font-size:12px; }
.clips-pipeline[data-pipeline-complete='true'] .clips-pipeline-meta strong { color:#a9f0c6; text-shadow:0 0 18px rgba(169,240,198,.45); }
@media (max-width:900px) {
  .clips-pipeline { padding:21px 18px 22px; }
  .clips-pipeline-step { padding-right:7px !important; padding-left:7px !important; }
  .clips-pipeline-node { width:58px; height:58px; flex-basis:58px; }
  .clips-pipeline-track { top:127px; }
  .clips-pipeline-step > strong { font-size:12px; }
}
@media (max-width:700px) {
  .clips-pipeline { padding:22px 18px 19px; border-radius:24px; }
  .clips-pipeline-meta { grid-template-columns:1fr auto; }
  .clips-pipeline-meta strong { text-align:right; }
  .clips-pipeline-meta span:last-child { display:none; }
  .clips-pipeline-track { top:80px; bottom:78px; left:50px; width:2px; height:auto; }
  .clips-pipeline-track > span { width:100%; height:var(--pipeline-progress); transition:height .72s cubic-bezier(.22,.8,.25,1); }
  .clips-pipeline-track > span::after { top:auto; right:50%; bottom:-6px; transform:translate(50%,50%); }
  .clips-workflow-flow { grid-template-columns:1fr; gap:8px; margin-top:22px; }
  .clips-pipeline-step { display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto auto; min-height:105px; align-items:center; padding:10px 12px 10px 6px !important; text-align:left; }
  .clips-pipeline-number { grid-column:2; margin:0 0 5px; }
  .clips-pipeline-node { z-index:1; grid-row:1 / 4; grid-column:1; width:54px; height:54px; flex-basis:54px; margin:0; border-radius:17px; }
  .clips-pipeline-step > strong, .clips-pipeline-step > small { grid-column:2; max-width:none; }
  .clips-pipeline-step > strong { font-size:15px; }
  .clips-workflow-flow li.is-active .clips-pipeline-step { transform:none; }
  .clips-workflow-flow li.is-active .clips-pipeline-node { transform:scale(1.08); }
  .clips-workflow-flow li.is-active .clips-pipeline-step > small { max-height:44px; margin-top:5px; }
  .clips-pipeline-node-transcript { gap:3px; }
  .clips-pipeline-node-review i { width:25px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .clips-pipeline *, .clips-pipeline-track > span { transition:none !important; animation:none !important; }
}

/* Clips feature stories. */
.clips-feature-stories { margin-top:110px; }
.clips-feature-intro { max-width:820px; margin-bottom:34px; }
.clips-feature-intro h2 { margin-bottom:15px; font-size:clamp(40px,5.7vw,70px); }
.clips-feature-intro > p:last-child { max-width:650px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.clips-feature-bubble { display:grid; gap:0; min-height:500px; margin-top:22px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:34px; background:rgba(255,255,255,.72); box-shadow:0 22px 75px rgba(53,33,100,.065); }
.clips-feature-bubble-portrait { grid-template-columns:minmax(440px,1.15fr) minmax(300px,.85fr); }
.clips-feature-bubble-landscape.clips-feature-bubble-reverse { grid-template-columns:minmax(520px,1.3fr) minmax(300px,.7fr); }
.clips-feature-copy { display:flex; flex-direction:column; justify-content:center; padding:62px 52px; }
.clips-feature-number { display:grid; width:42px; height:42px; place-items:center; margin-bottom:52px; border-radius:50%; background:var(--soft); color:var(--violet); font-size:11px; font-weight:850; letter-spacing:.08em; }
.clips-feature-copy .eyebrow { margin-bottom:13px; }
.clips-feature-copy h2 { max-width:480px; margin-bottom:18px; font-size:clamp(34px,4.1vw,56px); line-height:.98; }
.clips-feature-copy > p:not(.eyebrow) { max-width:520px; margin:0; color:var(--muted); font-size:16px; line-height:1.62; }
.clips-feature-hints { display:grid; gap:8px; margin-top:28px; }
.clips-feature-hints span { display:flex; gap:12px; align-items:baseline; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.58); color:var(--muted); font-size:12px; line-height:1.45; }
.clips-feature-hints strong { flex:0 0 66px; color:var(--ink); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.clips-feature-list { display:grid; gap:10px; margin:25px 0 0; padding:0; list-style:none; }
.clips-feature-list li { position:relative; padding-left:21px; color:var(--ink); font-size:13px; font-weight:700; line-height:1.45; }
.clips-feature-list li::before { content:'✓'; position:absolute; left:0; color:var(--violet); font-weight:900; }
.clips-feature-bubble-reverse .clips-feature-copy { order:2; }
.clips-feature-bubble-reverse .clips-feature-media { order:1; }
.clips-feature-media { isolation:isolate; position:relative; display:flex; min-height:500px; align-items:center; justify-content:center; overflow:hidden; padding:58px 22px 22px; border:0; border-radius:0 33px 33px 0; background:linear-gradient(145deg,#22172d,#172d32 64%,#6d3d37); color:#fff; }
.clips-feature-bubble-reverse .clips-feature-media { border-radius:33px 0 0 33px; }
.clips-feature-media::before { content:''; position:absolute; z-index:-1; inset:0; opacity:.25; background-image:radial-gradient(circle,rgba(255,255,255,.4) 1px,transparent 1.3px); background-size:28px 28px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.clips-feature-media::after { content:''; position:absolute; z-index:-1; width:320px; height:320px; border:1px solid rgba(188,168,255,.18); border-radius:50%; box-shadow:0 0 0 44px rgba(188,168,255,.035),0 0 0 88px rgba(188,168,255,.022); }
.clips-media-label { position:absolute; top:24px; left:26px; color:#bca8ff; font-size:9px; font-weight:850; letter-spacing:.18em; }
.clips-feature-media > small { position:absolute; right:26px; bottom:22px; color:rgba(255,255,255,.5); font-size:10px; letter-spacing:.05em; }
.clips-feature-demo-gif { position:relative; z-index:1; display:block; width:min(100%,720px); height:auto; border:0; border-radius:14px; box-shadow:0 16px 42px rgba(7,8,14,.2); }
.clips-feature-demo-gif-vertical { width:auto; max-width:100%; height:min(420px,70vw); object-fit:contain; }
[data-theme="dark"] .clips-feature-bubble { background:var(--surface); box-shadow:none; }
[data-theme="dark"] .clips-feature-hints span { background:rgba(255,255,255,.035); }
.clips-media-credit { margin:18px 4px 0; color:var(--muted); font-size:11px; line-height:1.5; text-align:left; }
.clips-media-credit cite { color:var(--ink); font-style:normal; }
@media (max-width:980px) {
  .clips-feature-bubble, .clips-feature-bubble-reverse, .clips-feature-bubble-portrait, .clips-feature-bubble-landscape.clips-feature-bubble-reverse { grid-template-columns:1fr; min-height:0; }
  .clips-feature-copy, .clips-feature-bubble-reverse .clips-feature-copy { order:1; }
  .clips-feature-media, .clips-feature-bubble-reverse .clips-feature-media { order:2; border-radius:0 0 33px 33px; }
  .clips-feature-copy { padding:38px 32px 24px; }
  .clips-feature-number { margin-bottom:34px; }
  .clips-feature-media { min-height:420px; }
}
@media (max-width:700px) {
  .clips-feature-stories { margin-top:78px; }
  .clips-feature-intro { margin-bottom:25px; }
  .clips-feature-intro > p:last-child { font-size:15px; }
  .clips-feature-bubble { gap:0; margin-top:14px; padding:0; border-radius:24px; }
  .clips-feature-copy { padding:26px 17px 20px; }
  .clips-feature-number { width:36px; height:36px; margin-bottom:28px; }
  .clips-feature-copy h2 { font-size:clamp(34px,10vw,47px); }
  .clips-feature-copy > p:not(.eyebrow) { font-size:15px; }
  .clips-feature-hints span { display:grid; gap:3px; }
  .clips-feature-media, .clips-feature-bubble-reverse .clips-feature-media { min-height:330px; padding:50px 12px 12px; border-radius:0 0 23px 23px; }
  .clips-media-label { top:20px; left:20px; }
  .clips-feature-media > small { right:20px; bottom:17px; }
}

/* PoeysiaPRO Journal. */
.journal-page { max-width:1160px; margin:0 auto; }
.journal-surface { padding:38px 0 0; }
.journal-header { max-width:820px; }
.journal-header h1 { margin-bottom:28px; font-size:clamp(56px,7.4vw,98px); }
.journal-header h1 em { color:var(--violet); font-style:normal; }
.journal-header > p:last-child { max-width:680px; margin:0; color:var(--muted); font-size:19px; line-height:1.6; }
.journal-grid { margin-top:78px; border-top:1px solid var(--line); }
.journal-card { --journal-accent:var(--violet); position:relative; display:grid; grid-template-columns:150px minmax(0,1fr) 34px; grid-template-areas:'meta title arrow' 'date excerpt arrow'; gap:10px 30px; align-items:start; padding:34px 2px 36px; border-bottom:1px solid var(--line); text-decoration:none; }
.journal-card-top { display:contents; }
.journal-card-top span { grid-area:meta; padding-top:6px; color:var(--journal-accent); font-size:10px; font-weight:850; letter-spacing:.2em; text-transform:uppercase; }
.journal-card-top b { grid-area:arrow; align-self:center; color:var(--journal-accent); font-size:25px; line-height:1; transition:transform .2s ease; }
.journal-card:hover .journal-card-top b { transform:translateX(4px); }
.journal-card h2 { grid-area:title; max-width:760px; margin:0; font-size:clamp(32px,4vw,50px); line-height:1; transition:color .2s ease; }
.journal-card:hover h2 { color:var(--journal-accent); }
.journal-card > p { grid-area:excerpt; max-width:650px; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.journal-card time { grid-area:date; padding-top:3px; color:var(--muted); font-size:12px; }

.journal-post-page { max-width:1160px; margin:0 auto; }
.journal-post-shell { padding:28px 0 0; }
.journal-back { display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; font-weight:750; text-decoration:none; }
.journal-back:hover { color:var(--journal-accent); }
.journal-post-header { max-width:940px; padding:76px 0 70px; border-bottom:1px solid var(--line); }
.journal-kicker { margin:0 0 23px; color:var(--journal-accent); font-size:11px; font-weight:850; letter-spacing:.22em; text-transform:uppercase; }
.journal-post-header h1 { max-width:940px; margin-bottom:25px; font-size:clamp(58px,8vw,104px); }
.journal-post-lead { max-width:720px; margin:0; color:var(--muted); font-size:21px; line-height:1.55; }
.journal-post-meta { display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:32px; color:var(--muted); font-size:12px; }
.journal-post-meta span::before { content:'·'; margin-right:24px; color:var(--journal-accent); }
.journal-post-copy { max-width:760px; margin-left:auto; padding:78px 0 74px; color:var(--muted); font-size:18px; line-height:1.82; }
.journal-post-copy p { margin:0 0 27px; }
.journal-post-copy p:first-child { color:var(--ink); font-size:23px; line-height:1.65; }
.journal-post-copy p:last-child { margin-bottom:0; }
.journal-post-copy .journal-post-subheading { margin:0 0 28px; color:var(--ink); font-size:clamp(30px,4vw,48px); line-height:1.05; letter-spacing:-.06em; }
.journal-post-copy.has-following-media { padding-bottom:48px; }
.journal-post-copy.is-continuation { padding-top:0; }
.journal-post-copy.is-continuation p:first-child { color:inherit; font-size:inherit; line-height:inherit; }
.journal-post-media { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:24px; align-items:start; margin:0 0 62px; }
.journal-post-media figure { min-width:0; margin:0; }
.journal-post-media figure.is-wide { grid-column:1 / -1; }
.journal-post-media figure.is-compact { width:min(100%,472px); margin-left:auto; }
.journal-post-media img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.journal-post-media figcaption { max-width:620px; margin-top:12px; color:var(--muted); font-size:12px; line-height:1.55; }
.journal-post-footer { padding:62px 0 12px; border-top:1px solid var(--line); background:transparent; }
.journal-post-footer h2 { margin-bottom:14px; font-size:clamp(36px,5vw,56px); }
.journal-post-footer > p:not(.eyebrow) { max-width:610px; margin-bottom:24px; color:var(--muted); font-size:16px; line-height:1.55; }
@media (max-width:700px) { .journal-surface { padding-top:8px; }.journal-header h1 { font-size:clamp(49px,14vw,68px); }.journal-header > p:last-child { font-size:16px; }.journal-grid { margin-top:48px; }.journal-card { grid-template-columns:1fr auto; grid-template-areas:'meta arrow' 'title title' 'excerpt excerpt' 'date date'; gap:14px 18px; padding:28px 0 30px; }.journal-card-top span { padding-top:2px; }.journal-card h2 { margin-top:8px; font-size:clamp(32px,10vw,43px); }.journal-card time { padding-top:8px; }.journal-post-shell { padding-top:8px; }.journal-post-header { padding:50px 0 42px; }.journal-post-header h1 { font-size:clamp(48px,14vw,68px); }.journal-post-lead { font-size:18px; }.journal-post-meta { display:grid; gap:7px; }.journal-post-meta span::before { content:none; }.journal-post-copy { margin-left:0; padding:48px 0 54px; font-size:16px; line-height:1.75; }.journal-post-copy p:first-child { font-size:20px; }.journal-post-copy .journal-post-subheading { margin-bottom:22px; font-size:clamp(29px,9vw,42px); }.journal-post-copy.has-following-media { padding-bottom:38px; }.journal-post-copy.is-continuation { padding-top:0; }.journal-post-copy.is-continuation p:first-child { font-size:inherit; }.journal-post-media { grid-template-columns:1fr; gap:30px; margin-bottom:46px; }.journal-post-media figure:last-child:not(.is-wide) { width:min(82%,320px); margin-left:auto; }.journal-post-media figure.is-compact { margin-left:auto; }.journal-post-media img { border-radius:13px; }.journal-post-footer { padding:42px 0 10px; }.journal-post-footer .hero-actions { display:grid; }.journal-post-footer .button { width:100%; } }
.academy-page { max-width:1160px; margin:0 auto; padding:20px 0 20px; }
.academy-header { max-width:820px; padding:30px 0 56px; }
.academy-header h1 { max-width:820px; margin-bottom:24px; }
.academy-header h1 em { color:var(--violet); font-style:normal; }
.academy-season-list { display:grid; gap:88px; }
.academy-season-block { padding-top:34px; border-top:1px solid var(--line); }
.academy-season-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.academy-season-heading h2 { margin-bottom:12px; font-size:clamp(38px,5vw,64px); }
.academy-season-heading p:not(.eyebrow) { max-width:650px; margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.academy-season-heading .text-link { flex:0 0 auto; padding-bottom:7px; color:var(--violet-dark); font-size:14px; font-weight:750; text-decoration:none; }
.academy-lesson-count, .academy-season-meta { margin:25px 0 18px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.academy-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.academy-lesson-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.06); text-decoration:none; transition:transform .18s ease, border-color .18s ease; }
.academy-lesson-card:hover { border-color:color-mix(in srgb,var(--violet) 38%,var(--line)); transform:translateY(-3px); }
.academy-card-media { position:relative; overflow:hidden; aspect-ratio:2 / 3; background:var(--soft); }
.academy-card-media img { display:block; width:100%; height:100%; object-fit:cover; }
.academy-card-part, .academy-card-duration { position:absolute; bottom:12px; padding:7px 9px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(16,13,22,.72); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.academy-card-part { left:12px; }
.academy-card-duration { right:12px; }
.academy-card-copy { display:flex; flex:1; flex-direction:column; padding:22px 21px 20px; }
.academy-card-copy .eyebrow { margin-bottom:10px; }
.academy-card-copy h3 { margin:0 0 10px; font-size:clamp(24px,2.5vw,31px); line-height:.98; letter-spacing:-.06em; }
.academy-card-copy p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.academy-card-link { display:block; margin-top:auto; padding-top:22px; color:var(--violet-dark); font-size:13px; font-weight:800; }
.academy-back-link { display:inline-flex; margin:5px 0 25px; color:var(--muted); font-size:13px; font-weight:750; text-decoration:none; }
.academy-back-link:hover, .academy-breadcrumb a:hover { color:var(--violet); }
.academy-season-header { padding-top:15px; padding-bottom:34px; }
.academy-season-meta { display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 25px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.academy-season-navigation, .academy-lesson-navigation { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin-top:68px; padding-top:25px; border-top:1px solid var(--line); }
.academy-season-navigation a:not(.button), .academy-lesson-navigation a:not(.button) { display:grid; gap:6px; min-height:44px; color:var(--ink); text-decoration:none; }
.academy-season-navigation a:not(.button):last-child, .academy-lesson-navigation a:not(.button):last-child { justify-items:end; text-align:right; }
.academy-season-navigation small, .academy-lesson-navigation small { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.academy-season-navigation strong, .academy-lesson-navigation strong { font-size:17px; letter-spacing:-.03em; }
.academy-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 30px; color:var(--muted); font-size:13px; }
.academy-breadcrumb a { text-decoration:none; }
.academy-lesson-layout { display:grid; grid-template-columns:minmax(280px,380px) minmax(0,1fr); gap:clamp(38px,7vw,96px); align-items:start; margin-top:8px; }
.academy-lesson-copy { min-width:0; }
.academy-lesson-header { max-width:none; }
.academy-lesson-header h1 { margin-bottom:20px; }
.academy-progress { width:min(100%,460px); height:3px; margin:32px 0 34px; overflow:hidden; background:var(--line); }
.academy-progress span { display:block; height:100%; background:var(--violet); }
.academy-video-figure { width:100%; margin:0; padding:10px; border:1px solid var(--line); border-radius:23px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.1); }
.academy-video-figure video { display:block; width:100%; height:auto; max-height:78vh; border-radius:15px; background:#111; object-fit:contain; }
.academy-video-figure figcaption { padding:12px 4px 1px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.academy-lesson-content, .academy-transcript { max-width:760px; margin-left:auto; margin-right:auto; }
.academy-lesson-layout .academy-lesson-content { max-width:none; }
.academy-content-section { padding:34px 0 16px; border-top:1px solid var(--line); }
.academy-content-section p:not(.eyebrow), .academy-transcript-body p { color:var(--muted); font-size:17px; line-height:1.75; }
.academy-content-section p:last-child, .academy-transcript-body p:last-child { margin-bottom:0; }
.academy-transcript { margin-top:55px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.academy-transcript h2 { margin-bottom:18px; font-size:clamp(30px,4vw,44px); }
.academy-transcript-body:empty { min-height:26px; }
.academy-product-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; margin:72px auto 0; padding:35px 38px; border-radius:23px; background:var(--plum); color:#fff; }
.academy-product-cta .eyebrow { color:#bca8ff; }
.academy-product-cta h2 { margin-bottom:10px; font-size:clamp(31px,4vw,48px); }
.academy-product-cta p:not(.eyebrow) { max-width:600px; margin:0; color:rgba(255,255,255,.72); font-size:15px; line-height:1.6; }
.academy-product-cta .button { flex:0 0 auto; }
[data-theme="dark"] .academy-lesson-card, [data-theme="dark"] .academy-video-figure { background:var(--surface); }
@media (max-width:900px) { .academy-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .academy-product-cta { align-items:flex-start; flex-direction:column; } }
@media (max-width:700px) { .academy-page { padding-top:8px; } .academy-header { padding:20px 0 40px; } .academy-season-heading { display:block; } .academy-season-heading .text-link { display:inline-flex; margin-top:18px; padding-bottom:0; } .academy-card-grid { grid-template-columns:1fr; gap:14px; } .academy-lesson-card { display:grid; grid-template-columns:120px minmax(0,1fr); border-radius:17px; } .academy-card-media { aspect-ratio:2 / 3; } .academy-card-copy { padding:16px 15px 14px; } .academy-card-copy h3 { font-size:24px; } .academy-card-copy p:not(.eyebrow) { font-size:13px; } .academy-card-link { padding-top:13px; font-size:12px; } .academy-card-part, .academy-card-duration { bottom:7px; padding:5px 7px; font-size:8px; } .academy-card-part { left:7px; } .academy-card-duration { right:7px; } .academy-season-navigation, .academy-lesson-navigation { grid-template-columns:1fr 1fr; gap:16px; } .academy-season-navigation .button, .academy-lesson-navigation .button { grid-column:1 / -1; grid-row:1; order:-1; } .academy-season-navigation a:not(.button):last-child, .academy-lesson-navigation a:not(.button):last-child { justify-items:end; } .academy-lesson-layout { grid-template-columns:1fr; gap:0; } .academy-video-figure { width:min(100%,340px); margin:0 auto 52px; } .academy-lesson-content, .academy-transcript { max-width:none; } .academy-content-section p:not(.eyebrow), .academy-transcript-body p { font-size:16px; line-height:1.7; } .academy-product-cta { margin-top:52px; padding:28px 22px; } .academy-product-cta .button { width:100%; } }

/* Carousel Composer: public, light-theme product shell. */
body[data-seo-page="carousel-composer"] #marketing-page { display:none !important; }
body[data-seo-page="carousel-composer"] #carousel-composer-page { display:block !important; }
.carousel-composer-page { max-width:1160px; margin:0 auto; padding:24px 0 72px; }

.composer-hero h1 { max-width:720px; margin-bottom:20px; font-size:clamp(52px,7vw,88px); line-height:.94; }.composer-hero h1 em { color:var(--violet); font-style:normal; }.composer-hero .lead { max-width:650px; }
.composer-workspace { min-width:0; }.composer-stepbar { display:flex; gap:25px; margin-bottom:17px; padding-bottom:15px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }.composer-stepbar span.is-current { color:var(--violet); }.composer-panel,.composer-analysis-panel,.composer-results { padding:31px; border:1px solid var(--line); border-radius:23px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.06); }.composer-panel-heading,.composer-results-heading { display:flex; justify-content:space-between; gap:18px; align-items:start; }.composer-panel h2,.composer-results h2 { margin-bottom:22px; font-size:clamp(32px,4vw,49px); }.composer-counter { padding:8px 10px; border-radius:99px; background:color-mix(in srgb,var(--ink) 8%,var(--paper)); color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; }.composer-input-wrap label,.composer-brief-fields label { display:block; margin-bottom:8px; font-size:13px; font-weight:750; }.composer-input-wrap textarea,.composer-brief-fields input,.composer-brief-fields select { display:block; width:100%; box-sizing:border-box; margin-bottom:8px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--page); color:var(--ink); font:inherit; resize:vertical; }.composer-input-wrap small { color:var(--muted); font-size:12px; }.composer-brief-fields { display:grid; gap:8px; margin-bottom:19px; }.composer-brief-fields label:not(:first-child) { margin-top:8px; }.composer-brief-fields label span { color:var(--muted); font-weight:500; }.composer-panel .button { margin-top:22px; }.composer-form-status { min-height:20px; margin:13px 0 0; color:var(--muted); font-size:13px; }.composer-analysis-panel { text-align:center; }.analysis-orbit { position:relative; display:grid; place-items:center; width:100px; height:100px; margin:12px auto 25px; border:1px solid rgba(112,74,255,.35); border-radius:50%; color:var(--violet); }.analysis-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--violet); animation:composer-orbit 1.4s linear infinite; }.analysis-orbit i:nth-child(2) { animation-delay:-.45s; }.analysis-orbit i:nth-child(3) { animation-delay:-.9s; }.analysis-orbit strong { font-size:10px; letter-spacing:.12em; }.composer-analysis-panel h2 { margin-bottom:22px; }.analysis-progress { height:4px; overflow:hidden; border-radius:99px; background:var(--soft); }.analysis-progress span { display:block; width:0; height:100%; background:var(--violet); transition:width .2s linear; }.composer-analysis-panel [data-composer-analysis-detail] { margin-top:16px; color:var(--muted); font-size:14px; }.composer-results-heading h2 { margin-bottom:25px; }.composer-style-row { display:flex; flex-wrap:wrap; align-items:center; gap:11px 16px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }.composer-style-row div { display:flex; flex-wrap:wrap; gap:6px; }.slide-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:22px; }.slide-card { position:relative; display:flex; min-height:190px; flex-direction:column; justify-content:space-between; overflow:hidden; padding:20px; border-radius:14px; background:#f3efe9; color:#211c24; }.slide-card > span { font-size:9px; font-weight:850; letter-spacing:.12em; }.slide-card > small { font-size:9px; font-weight:800; letter-spacing:.13em; opacity:.62; }.slide-card-title { background:#211c24; color:#fff; }.slide-card-title strong { font-size:32px; line-height:.89; letter-spacing:-.07em; }.slide-card-title em { color:#b8a5ff; font-style:normal; }.slide-card-quote { background:#dfd5ff; }.slide-card-quote p { max-width:270px; margin:25px 0; font-size:22px; font-weight:700; line-height:1.04; letter-spacing:-.05em; }.slide-card-diagram { background:#dce8df; }.diagram-lines { display:grid; gap:8px; margin:22px 0 12px; }.diagram-lines i { display:block; width:72%; height:13px; border-radius:8px; background:#4b3158; }.diagram-lines i:nth-child(2) { width:92%; background:#714aff; }.diagram-lines i:nth-child(3) { width:52%; }.slide-card-diagram strong { font-size:17px; }.slide-card-list { background:#f2d5cf; }.slide-card-list > strong { font-size:25px; line-height:.95; letter-spacing:-.06em; }.slide-card-list ol { margin:12px 0 0; padding-left:18px; font-size:12px; line-height:1.65; }.composer-download-card { display:flex; justify-content:space-between; gap:22px; align-items:center; margin-top:22px; padding:22px; border-radius:16px; background:var(--plum); color:#fff; }.composer-download-card .eyebrow { color:#c5b7ff; }.composer-download-card h3 { margin:0 0 7px; font-size:22px; }.composer-download-card p:not(.eyebrow) { max-width:520px; margin:0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.5; }.composer-download-card .button { flex:0 0 auto; background:#fff; color:var(--plum); }
@keyframes composer-orbit { from { transform:rotate(0deg) translateX(43px); } to { transform:rotate(360deg) translateX(43px); } }
@media (max-width:900px) { .composer-hero,.carousel-composer-page { padding-top:8px; } }
@media (max-width:600px) { .composer-hero h1 { font-size:clamp(49px,14vw,72px); }.composer-panel,.composer-analysis-panel,.composer-results { padding:22px 17px; }.composer-panel-heading,.composer-results-heading { display:block; }.composer-counter { display:inline-block; margin-bottom:12px; }.slide-preview-grid { grid-template-columns:1fr; }.composer-download-card { display:block; }.composer-download-card .button { display:flex; margin-top:18px; justify-content:center; }.composer-style-row { align-items:flex-start; flex-direction:column; }.composer-stepbar { gap:12px; font-size:9px; } }

/* Carousel Composer: the public page borrows the product interaction model, not the Brand Extractor shell. */
.composer-stepbar span { display:flex; align-items:center; gap:8px; }.composer-stepbar b { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--line); border-radius:50%; color:var(--muted); font-size:9px; }.composer-stepbar span.is-current b { border-color:var(--violet); background:var(--violet); color:#fff; }.composer-stepbar span.is-done { color:var(--ink); }.composer-stepbar span.is-done b { position:relative; border-color:#297c52; background:#297c52; color:transparent; }.composer-stepbar span.is-done b::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:11px; line-height:1; }
.composer-busybar { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; margin-bottom:35px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--page); text-align:left; font-size:13px; }.composer-busybar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.composer-busybar > span:not(.analysis-spinner) { color:var(--muted); font-variant-numeric:tabular-nums; }.composer-busybar button { padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; font-weight:750; cursor:pointer; }.analysis-spinner { width:15px; height:15px; border:2px solid var(--line); border-right-color:var(--violet); border-radius:50%; animation:composer-spin .7s linear infinite; }.composer-analysis-panel { min-height:360px; }.composer-analysis-panel .analysis-orbit { margin-top:26px; }
.composer-compose { padding:clamp(24px,4vw,44px); border:1px solid var(--line); border-radius:23px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.06); }.composer-brand-card { display:flex; align-items:center; gap:12px; max-width:540px; margin:0 auto 36px; padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:var(--page); }.composer-brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--violet); color:#fff; font-size:19px; }.composer-brand-card strong,.composer-brand-card small { display:block; }.composer-brand-card strong { font-size:15px; }.composer-brand-card small { margin-top:2px; color:var(--muted); font-size:12px; }.composer-brand-colours { position:relative; display:flex; width:150px; height:28px; margin-left:auto; overflow:hidden; border-radius:2px; }.composer-brand-colours i { flex:1 1 0; width:auto; height:100%; min-width:0; margin-left:-6px; border:0; border-radius:0; background:var(--violet); clip-path:polygon(22% 0,100% 0,78% 100%,0 100%); }.composer-brand-colours i:first-child { flex-grow:1.35; margin-left:-10px; }.composer-brand-colours i:last-child { flex-grow:1.35; margin-right:-10px; }.composer-brand-colours i:nth-child(2) { background:var(--violet-dark); }.composer-brand-colours i:nth-child(3) { background:var(--soft); }.composer-brand-colours i:nth-child(4) { background:var(--surface); }.composer-brand-colours i:nth-child(5) { background:var(--ink); }.composer-results-heading > div > p:not(.eyebrow) { max-width:580px; margin:-7px 0 25px; color:var(--muted); font-size:15px; line-height:1.55; }.composer-topic-list { display:grid; gap:10px; }.composer-topic-list button { display:flex; align-items:center; gap:15px; width:100%; padding:18px 19px; border:1px solid var(--line); border-radius:13px; background:var(--page); color:var(--ink); font:inherit; font-size:15px; font-weight:720; text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }.composer-topic-list button:hover { transform:translateY(-1px); border-color:var(--violet); }.composer-topic-list button i { display:grid; place-items:center; width:21px; height:21px; flex:none; border:1px solid var(--line); border-radius:50%; }.composer-topic-list button.is-selected { border-color:var(--violet); background:rgba(112,74,255,.075); }.composer-topic-list button.is-selected i { border-color:var(--violet); background:var(--violet); }.composer-topic-list button.is-selected i::after { content:'✓'; color:#fff; font-size:11px; }.composer-own-topic { display:flex; align-items:center; gap:16px; margin:18px 0 0; }.composer-own-topic input { flex:1; min-width:0; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--page); color:var(--ink); font:inherit; }.composer-compose-actions { display:flex; align-items:center; gap:16px; margin-top:24px; }.composer-compose-actions > span { color:var(--muted); font-size:12px; line-height:1.4; }
.composer-preview { --canvas-paper:#fbfbfa; --canvas-ink:#17171b; --canvas-muted:#777780; --canvas-accent:#704aff; --canvas-line:#e5e4e8; padding:clamp(24px,4vw,44px); border:1px solid var(--line); border-radius:23px; background:var(--surface); box-shadow:0 18px 70px rgba(53,33,100,.06); }.composer-preview-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:28px; }.composer-preview-heading h2 { margin-bottom:7px; font-size:clamp(34px,4vw,52px); }.composer-preview-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; }.composer-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:35px; align-items:start; }.composer-preview[data-palette="inverted"] { --canvas-paper:#704aff; --canvas-ink:#fff; --canvas-muted:#e3ddff; --canvas-accent:#fff; --canvas-line:#805fff; }.composer-preview[data-palette="dark"] { --canvas-paper:#18171d; --canvas-ink:#fff; --canvas-muted:#b6b4c0; --canvas-accent:#8c6fff; --canvas-line:#373442; }.composer-preview[data-palette="soft"] { --canvas-paper:#eee8ff; --canvas-ink:#2b223d; --canvas-muted:#6f667d; --canvas-accent:#5836d5; --canvas-line:#ddd4f6; }.composer-preview[data-palette="mono"] { --canvas-paper:#fff; --canvas-ink:#141418; --canvas-muted:#66666d; --canvas-accent:#141418; --canvas-line:#dedee3; }.composer-editor-controls { padding:3px 0; }.composer-editor-controls > p:not(.eyebrow) { margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.48; }.composer-editor-controls fieldset { display:grid; gap:12px; margin:0; padding:18px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.composer-editor-controls legend { margin-bottom:11px; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.13em; }.composer-editor-controls label { display:flex; align-items:center; gap:9px; font-size:13px; }.composer-editor-controls input { width:16px; height:16px; accent-color:var(--violet); }
.composer-thumbnail-rail { display:flex; gap:11px; margin:34px -1px 0; padding:15px; overflow-x:auto; border-radius:18px; background:#19181e; scrollbar-width:thin; }.composer-look-panel h3 { margin:0 0 5px; font-size:23px; letter-spacing:-.05em; }.composer-look-panel p { margin:0; color:var(--muted); font-size:12px; }.composer-look-controls { display:grid; gap:17px; }.composer-look-controls > div { display:grid; grid-template-columns:65px 1fr; gap:12px; align-items:center; }.composer-look-controls > div > span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }.composer-palette-row,.composer-preset-row { display:flex; flex-wrap:wrap; gap:8px; }.composer-palette-row button { display:grid; gap:5px; padding:0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:10px; font-weight:750; text-align:center; cursor:pointer; }.composer-palette-row i { display:block; width:48px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }.composer-palette-row button.is-selected i { outline:2px solid var(--violet); outline-offset:2px; }.composer-palette-row b { font-weight:750; }.composer-preset-row button { padding:8px 11px; border:1px solid var(--line); border-radius:99px; background:var(--page); color:var(--ink); font:inherit; font-size:11px; font-weight:750; cursor:pointer; }.composer-preset-row button.is-selected { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }.composer-preview .composer-download-card { margin-top:26px; }
.composer-preview-heading-actions { display:flex; align-items:flex-start; gap:12px; }
.composer-phone-toggle { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--page); color:var(--ink); font:inherit; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.composer-phone-toggle:hover,.composer-phone-toggle.is-selected { border-color:var(--violet); color:var(--violet-dark); background:rgba(112,74,255,.06); }
.composer-phone-toggle > .composer-phone-icon { display:block; width:15px; height:15px; flex:none; }
.composer-phone-toggle > .composer-phone-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.composer-phone-toggle > .composer-phone-icon-monitor { display:none; }
.composer-phone-toggle.is-selected > .composer-phone-icon-phone { display:none; }
.composer-phone-toggle.is-selected > .composer-phone-icon-monitor { display:block; }
.composer-image-controls { display:grid; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.composer-image-controls.is-disabled { opacity:.62; }
.composer-image-upload { display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--page); color:var(--ink); font-size:11px; font-weight:800; cursor:pointer; }
.composer-image-upload:hover { border-color:var(--violet); color:var(--violet-dark); background:rgba(112,74,255,.06); }
.composer-image-upload input[type="file"] { display:none; }
.composer-image-nav { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:8px; align-items:center; }
.composer-image-nav button { width:32px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--page); color:var(--ink); font:inherit; font-size:18px; line-height:1; cursor:pointer; }
.composer-image-nav button:hover:not(:disabled) { border-color:var(--violet); color:var(--violet-dark); }
.composer-image-nav button:disabled { cursor:not-allowed; opacity:.45; }
.composer-image-nav span { overflow:hidden; color:var(--muted); font-size:10px; font-weight:750; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.composer-image-status { margin:0; color:var(--muted); font-size:10px; line-height:1.35; text-align:center; }
.composer-image-sliders { display:grid; gap:4px; padding-top:3px; }
.composer-image-sliders .composer-range-heading { margin-top:5px; }
.composer-image-sliders .composer-range-heading label { color:var(--muted); font-size:11px; font-weight:750; }
.composer-image-sliders .composer-range-heading output { color:var(--violet-dark); font-size:11px; }
.composer-image-sliders .composer-range-wrap { padding-top:2px; }
.composer-image-sliders input[type="range"]:disabled { cursor:not-allowed; opacity:.55; }
.composer-image-layout-controls { display:grid; gap:7px; margin:0; padding:0; border:0; }
.composer-image-layout-controls legend { padding:0; color:var(--muted); font-size:11px; font-weight:750; }
.composer-image-layout-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; overflow:visible; }
.composer-image-layout-option { position:relative; min-height:30px; padding:4px 3px; border:1px solid var(--line); border-radius:7px; background:var(--page); color:var(--muted); font:inherit; font-size:9px; font-weight:800; cursor:pointer; }
.composer-image-layout-option svg { width:20px; height:20px; display:block; margin:auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.composer-image-layout-option::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); z-index:20; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface-solid); color:var(--ink); box-shadow:0 5px 16px rgba(24,22,31,.14); font-size:10px; font-weight:750; line-height:1; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .15s ease,transform .15s ease; }
.composer-image-layout-option:hover::after, .composer-image-layout-option:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.composer-image-layout-option:hover:not(:disabled) { border-color:var(--violet); color:var(--violet-dark); }
.composer-image-layout-option.is-selected { border-color:var(--violet); background:rgba(112,74,255,.1); color:var(--violet-dark); box-shadow:inset 0 0 0 1px var(--violet); }
.composer-image-layout-option:disabled { cursor:not-allowed; opacity:.5; }
.composer-image-shape-controls { display:grid; gap:7px; margin:0; padding:0; border:0; }
.composer-image-shape-controls legend { padding:0; color:var(--muted); font-size:11px; font-weight:750; }
.composer-image-shape-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.composer-image-shape-option { min-height:30px; padding:4px 3px; border:1px solid var(--line); border-radius:7px; background:var(--page); color:var(--muted); font:inherit; font-size:9px; font-weight:800; cursor:pointer; }
.composer-image-shape-option:hover:not(:disabled) { border-color:var(--violet); color:var(--violet-dark); }
.composer-image-shape-option.is-selected { border-color:var(--violet); background:rgba(112,74,255,.1); color:var(--violet-dark); box-shadow:inset 0 0 0 1px var(--violet); }
.composer-image-shape-option:disabled { cursor:not-allowed; opacity:.5; }
/* These controls also match the global button system's specificity through !important. Keep the
   image editor compact and make the selected option unmistakable. */
.composer-image-controls .composer-image-nav button { width:36px !important; height:36px !important; min-height:36px !important; padding:0 !important; border:1px solid var(--line) !important; border-radius:9px !important; background:var(--surface-solid) !important; color:var(--ink) !important; font:inherit !important; font-size:19px !important; font-weight:500 !important; line-height:1 !important; }
.composer-image-controls .composer-image-nav button:hover:not(:disabled) { border-color:var(--violet) !important; background:color-mix(in srgb,var(--violet) 8%,var(--surface-solid)) !important; color:var(--violet-dark) !important; }
.composer-image-controls .composer-image-shape-option,
.composer-image-controls .composer-image-layout-option { min-height:38px !important; padding:6px 5px !important; border:1px solid var(--line) !important; border-radius:10px !important; background:var(--surface-solid) !important; color:var(--ink) !important; font:inherit !important; font-size:10px !important; font-weight:800 !important; line-height:1.1 !important; }
.composer-image-controls .composer-image-shape-option:hover:not(:disabled),
.composer-image-controls .composer-image-layout-option:hover:not(:disabled) { border-color:var(--violet) !important; background:color-mix(in srgb,var(--violet) 8%,var(--surface-solid)) !important; color:var(--violet-dark) !important; }
.composer-image-controls .composer-image-shape-option.is-selected,
.composer-image-controls .composer-image-layout-option.is-selected { border-color:var(--violet) !important; background:var(--violet) !important; color:#fff !important; box-shadow:inset 0 0 0 1px var(--violet),0 3px 8px rgba(112,74,255,.18) !important; }
.composer-editor-controls fieldset.composer-image-shape-controls,
.composer-editor-controls fieldset.composer-image-layout-controls { margin:0 !important; padding:0 !important; border:0 !important; }
.composer-editor-controls fieldset.composer-image-shape-controls legend,
.composer-editor-controls fieldset.composer-image-layout-controls legend { margin:0 !important; padding:0 !important; background:transparent; }
/* The phone is a compact Instagram preview; the post image itself stays square-cornered
   even when the selected carousel style uses rounded cards. */
.composer-phone-post-media > div { border-radius:0 !important; }
.composer-editor-layout.is-phone-mode { grid-template-columns:minmax(0,1fr); }
.composer-phone-view { min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:0; border-radius:18px; background:transparent; }
.composer-phone-view > p { margin:0; color:var(--muted); font-size:12px; }
.composer-download-card { border:1px solid rgba(23,23,27,.14); background:linear-gradient(118deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.18) 32%,rgba(255,255,255,0) 47%),linear-gradient(135deg,#d9dade 0%,#f5f5f6 48%,#cfd0d5 100%); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 30px rgba(23,23,27,.1); }
.composer-download-card .eyebrow { color:var(--violet-dark); }
.composer-download-card p:not(.eyebrow) { color:var(--muted); }
.composer-download-note { display:block; margin-top:8px; color:var(--ink); font-size:11px; font-weight:750; letter-spacing:.01em; }
.composer-phone-device { position:relative; width:min(305px,60%); aspect-ratio:9 / 18; padding:8px; border-radius:42px; background:linear-gradient(140deg,#373737,#090909 62%); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09),inset 0 -2px 0 rgba(0,0,0,.7),0 25px 45px rgba(0,0,0,.22); }
.composer-phone-device::before,.composer-phone-device::after { content:''; position:absolute; left:-2px; width:3px; background:#171717; border-radius:2px 0 0 2px; }.composer-phone-device::before { top:94px; height:25px; }.composer-phone-device::after { top:143px; height:42px; box-shadow:0 67px 0 #171717; }
.composer-phone-volume { position:absolute; top:129px; right:-2px; width:3px; height:67px; border-radius:0 2px 2px 0; background:#171717; }.composer-phone-lock { position:absolute; top:88px; left:-2px; width:3px; height:22px; border-radius:2px 0 0 2px; background:#171717; }
.composer-phone-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:35px; background:#fff; }
.composer-phone-island { position:absolute; z-index:4; top:7px; left:50%; width:84px; height:24px; transform:translateX(-50%); border-radius:999px; background:#000; }
.composer-phone-status { position:absolute; z-index:5; top:0; left:0; right:0; height:41px; display:flex; align-items:center; justify-content:space-between; padding:15px 21px 0; color:#000; font-size:10px; font-weight:800; }.composer-phone-status-icons { display:flex; align-items:center; gap:5px; }.composer-phone-signal { display:flex; align-items:flex-end; gap:2px; height:9px; }.composer-phone-signal i { display:block; width:2px; border-radius:1px; background:#000; }.composer-phone-signal i:nth-child(1) { height:3px; }.composer-phone-signal i:nth-child(2) { height:5px; }.composer-phone-signal i:nth-child(3) { height:7px; }.composer-phone-signal i:nth-child(4) { height:9px; }.composer-phone-status-icons b { display:block; position:relative; width:16px; height:8px; border:1px solid #0008; border-radius:3px; }.composer-phone-status-icons b::after { content:''; position:absolute; inset:2px; border-radius:1px; background:#000; }
.composer-phone-app { position:absolute; inset:0; overflow:hidden; padding-top:41px; padding-bottom:43px; color:#000; background:#fff; }.composer-phone-header { height:36px; display:flex; align-items:center; justify-content:space-between; padding:0 11px 4px; border-bottom:1px solid #efefef; }.composer-phone-header > span { font-family:'Brush Script MT','Segoe Script',cursive; font-size:21px; }.composer-phone-header > div { display:flex; gap:10px; }.composer-phone-header b { font-size:18px; font-weight:500; line-height:1; }
.composer-phone-stories { display:flex; gap:8px; overflow:hidden; padding:9px 9px 7px; border-bottom:1px solid #efefef; }.composer-phone-stories > div { display:flex; flex:0 0 41px; flex-direction:column; align-items:center; gap:4px; }.composer-phone-stories i,.composer-phone-post header > i,.composer-phone-tabbar i { display:block; width:39px; height:39px; flex:0 0 auto; border:2px solid #fff; border-radius:50%; background:linear-gradient(135deg,#ffb37c,#dc2743 60%,#7a1f4a); box-shadow:0 0 0 2px #dc2743; }.composer-phone-stories small { width:41px; overflow:hidden; color:#262626; font-size:6px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.composer-phone-stories .blue { background:linear-gradient(135deg,#75d4e6,#1472a4); box-shadow:0 0 0 2px #0095f6; }.composer-phone-stories .pink { background:linear-gradient(135deg,#fdc468,#bc1888); }.composer-phone-stories .own,.composer-phone-tabbar .own { background:linear-gradient(135deg,#c7c7c7,#555); box-shadow:0 0 0 2px #dbdbdb; }
.composer-phone-post { overflow:hidden; }.composer-phone-post header { height:39px; display:flex; align-items:center; gap:7px; padding:6px 9px; }.composer-phone-post header > i { width:27px; height:27px; border-width:1px; }.composer-phone-post header > div { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }.composer-phone-post header strong { font-size:9px; line-height:1; }.composer-phone-post header small { color:#737373; font-size:7px; line-height:1; }.composer-phone-post header > b { font-size:10px; letter-spacing:1px; }.composer-phone-post-media { width:100%; max-height:none; overflow:hidden; }.composer-phone-post-media > div { box-shadow:none !important; }.composer-phone-actions { display:flex; justify-content:space-between; padding:7px 9px 3px; font-size:19px; line-height:1; }.composer-phone-actions span:nth-child(2) { font-size:15px; }.composer-phone-actions span:nth-child(3) { font-size:15px; transform:rotate(-28deg); }.composer-phone-actions span:nth-child(4) { font-size:16px; }.composer-phone-meta { padding:0 9px; }.composer-phone-meta strong { display:block; font-size:8px; }.composer-phone-meta p { margin:3px 0 0; font-size:7px; line-height:1.35; }.composer-phone-meta p b { margin-right:3px; }.composer-phone-meta small,.composer-phone-meta time { display:block; margin-top:3px; color:#8e8e8e; font-size:6px; }.composer-phone-meta time { text-transform:uppercase; }
.composer-phone-tabbar { position:absolute; right:0; bottom:0; left:0; z-index:3; height:43px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid #efefef; background:#fff; color:#000; }.composer-phone-tabbar span { font-size:20px; line-height:1; }.composer-phone-tabbar i { width:18px; height:18px; border-width:1px; box-shadow:none; }
@keyframes composer-spin { to { transform:rotate(360deg); } }
@media (max-width:900px) { .composer-editor-layout { grid-template-columns:1fr; }.composer-editor-controls { max-width:480px; margin:0 auto; }.composer-look-panel { grid-template-columns:1fr; }.composer-look-controls > div { grid-template-columns:1fr; gap:8px; } }
@media (max-width:600px) { .composer-busybar { grid-template-columns:auto minmax(0,1fr) auto; }.composer-busybar > span:not(.analysis-spinner) { display:none; }.composer-compose,.composer-preview { padding:22px 17px; }.composer-results-heading,.composer-preview-heading { display:block; }.composer-results-heading .text-link,.composer-preview-heading .text-link { display:inline-block; margin:0 0 22px; }.composer-preview-heading-actions { align-items:stretch; flex-direction:column; }.composer-phone-toggle { justify-content:center; }.composer-topic-list button { padding:15px; font-size:14px; }.composer-compose-actions { display:block; }.composer-compose-actions > span { display:block; margin-top:12px; }.composer-thumbnail-rail { margin-right:-17px; margin-left:-17px; border-radius:0; }.composer-look-panel { gap:18px; }.composer-brand-card { margin-bottom:26px; }.composer-brand-colours { width:104px; height:20px; }.composer-brand-colours i { width:auto; height:100%; }.composer-phone-view { min-height:430px; }.composer-phone-device { width:min(285px,82%); } }

/* Carousel Composer refinements: brand-first source flow, neutral surfaces and a stepped story control. */


.composer-input-wrap textarea { min-height:88px; max-height:132px; resize:none; }
.composer-content-source { margin-top:24px; padding-top:23px; border-top:1px solid var(--line); }
.composer-field-label { display:block; margin-bottom:10px; font-size:13px; font-weight:750; }

.composer-content-input { display:grid; gap:8px; margin-top:15px; }
.composer-content-input label { margin:0; font-size:13px; font-weight:750; }
.composer-content-input input { width:100%; box-sizing:border-box; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--page); color:var(--ink); font:inherit; }
.composer-content-input small { color:var(--muted); font-size:12px; }
.composer-results-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; }
.composer-results-actions .text-link:disabled { opacity:.5; cursor:wait; }
.composer-output-toggle { display:flex; padding:3px; border:1px solid var(--line); border-radius:99px; background:var(--page); }
.composer-output-toggle button { padding:7px 11px; border:0; border-radius:99px; background:transparent; color:var(--muted); font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.composer-output-toggle button.is-selected { background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(25,20,40,.12); }
.composer-regenerate-slide { display:inline-flex; margin:0 0 16px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.composer-regenerate-slide:hover { border-color:var(--violet); color:var(--violet-dark); }
.composer-regenerate-slide:disabled { opacity:.55; cursor:wait; }
.composer-regenerate-status { min-height:17px; margin:-6px 0 12px; color:var(--violet-dark); font-size:11px; line-height:1.4; }







.composer-range-heading { display:flex; justify-content:space-between; gap:15px; align-items:baseline; }
.composer-range-heading label { margin:0 !important; }
.composer-range-heading output { color:var(--violet-dark); font-size:13px; font-weight:800; }
.composer-range-wrap { padding:8px 2px 0; }
.composer-range-wrap input[type="range"] { display:block; width:100%; height:20px; margin:0; padding:0; border:0; box-sizing:border-box; appearance:none; -webkit-appearance:none; border-radius:99px; outline:none; background:linear-gradient(90deg,var(--violet) 0 0%,var(--line) 0 100%); cursor:pointer; }
.composer-range-wrap input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; appearance:none; -webkit-appearance:none; border:3px solid var(--surface); border-radius:50%; background:var(--violet); box-shadow:0 0 0 1px var(--violet),0 3px 8px rgba(72,42,170,.25); }
.composer-range-wrap input[type="range"]::-moz-range-thumb { width:15px; height:15px; border:3px solid var(--surface); border-radius:50%; background:var(--violet); box-shadow:0 0 0 1px var(--violet),0 3px 8px rgba(72,42,170,.25); }
.composer-range-ticks { display:grid; grid-template-columns:repeat(4,1fr); margin-top:10px; color:var(--muted); font-size:10px; font-weight:750; }
.composer-range-ticks span:nth-child(2),.composer-range-ticks span:nth-child(3) { text-align:center; }
.composer-range-ticks span:last-child { text-align:right; }
.composer-explainer { margin-top:110px; padding:72px 0 20px; border-top:1px solid var(--line); }
.composer-explainer-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,420px); gap:26px 70px; align-items:end; }
.composer-explainer-heading .eyebrow { grid-column:1 / -1; margin:0; }
.composer-explainer-heading h2 { margin:0; font-size:clamp(42px,6vw,76px); line-height:.93; letter-spacing:-.075em; }
.composer-explainer-heading h2 em { color:var(--violet); font-style:normal; }
.composer-explainer-heading > p:not(.eyebrow) { margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.composer-explainer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:58px; }
.composer-explainer-grid article { min-height:205px; padding:25px; border:1px solid var(--line); background:var(--surface); }
.composer-explainer-grid article > span { color:var(--violet); font-size:11px; font-weight:850; letter-spacing:.14em; }
.composer-explainer-grid h3 { margin:44px 0 10px; font-size:22px; letter-spacing:-.045em; }
.composer-explainer-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.composer-input-examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.composer-input-examples > div { padding:22px 25px 25px; background:var(--page); border:1px solid var(--line); }
.composer-input-examples .eyebrow { display:block; margin:0 0 25px; color:var(--violet); font-size:10px; }
.composer-input-examples strong { display:block; margin-bottom:8px; font-size:17px; }
.composer-input-examples p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width:900px) { .composer-explainer-heading { grid-template-columns:1fr; gap:18px; }.composer-explainer-heading .eyebrow { grid-column:auto; }.composer-explainer-grid,.composer-input-examples { grid-template-columns:1fr; } }
@media (max-width:600px) { .composer-explainer { margin-top:70px; padding-top:50px; }.composer-explainer-grid { margin-top:38px; }.composer-explainer-grid article { min-height:0; }.composer-explainer-grid h3 { margin-top:30px; }.composer-range-ticks { font-size:9px; }.composer-content-source { margin-top:20px; padding-top:20px; }.composer-results-actions { justify-content:flex-start; margin-top:14px; }.composer-preview-heading .composer-results-actions { display:grid; justify-items:start; }.composer-output-toggle { order:-1; } }

/* Composer controls sit inside a shared global button system; keep these variants intentional. */


.composer-results-actions .text-link { min-height:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--violet-dark) !important; box-shadow:none !important; font-size:12px !important; }
.composer-topic-list button { background:var(--page) !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.composer-topic-list button.is-selected { background:color-mix(in srgb,var(--violet) 8%,var(--page)) !important; border-color:var(--violet) !important; }
.composer-preset-row button { background:var(--page) !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.composer-preset-row button.is-selected { border-color:var(--ink) !important; box-shadow:inset 0 0 0 1px var(--ink) !important; }
.composer-palette-row button { background:transparent !important; color:var(--muted) !important; border:0 !important; box-shadow:none !important; }
.composer-busybar button { background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.composer-output-toggle button { background:transparent !important; color:var(--muted) !important; border:0 !important; box-shadow:none !important; }
.composer-output-toggle button.is-selected { background:var(--surface) !important; color:var(--ink) !important; box-shadow:0 1px 4px rgba(25,20,40,.12) !important; }
.composer-regenerate-slide { background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.composer-download-card .button { background:#fff !important; color:var(--plum) !important; border:0 !important; }
.composer-logo-scale { margin-top:4px; padding-top:15px; border-top:1px solid var(--line); }
.composer-logo-scale .composer-range-heading { margin:0; }
.composer-logo-scale .composer-range-heading label { color:var(--muted); font-size:11px; font-weight:750; }
.composer-logo-scale .composer-range-heading output { color:var(--violet-dark); font-size:11px; }


.composer-input-wrap input[type="url"]:focus { outline:2px solid var(--violet); outline-offset:-1px; border-color:transparent; }


/* Ladeschirm: sichtbare Schritte statt eines Balkens, der sich selbst füllt. */
.composer-stages { display:grid; gap:2px; margin:24px 0 0; padding:0; list-style:none; }
.composer-stages { text-align:left; max-width:520px; margin-inline:auto; }
.composer-stages li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line); }
.composer-stages li:last-child { border-bottom:0; }
.composer-stages strong { justify-self:start; font-size:15px; font-weight:700; }
.composer-stages small { justify-self:end; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.composer-stage-mark { display:grid; place-items:center; width:22px; height:22px; border-radius:999px; border:1.5px solid var(--line); color:#fff; font-size:12px; font-weight:800; }
.composer-stages li[data-state="pending"] { opacity:.45; }
.composer-stages li[data-state="running"] .composer-stage-mark { border-color:var(--violet); border-right-color:transparent; animation:composer-stage-spin .7s linear infinite; }
.composer-stages li[data-state="done"] .composer-stage-mark { border-color:var(--violet); background:var(--violet); }
@keyframes composer-stage-spin { to { transform:rotate(360deg); } }
.composer-stage-note { margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }

/* Live radar loader: the visual language comes from auxera-company's RadarLoader. */
.composer-analysis-panel { min-height:650px; }
.composer-busybar { grid-template-columns:auto minmax(0,1fr) auto auto; margin-bottom:20px; }
.composer-busybar .composer-busy-status { color:var(--violet-dark) !important; font-size:10px; font-weight:850; letter-spacing:.15em; }
.composer-radar-mini { position:relative; display:block; width:19px; height:19px; overflow:hidden; border:1px solid rgba(99,55,255,.2); border-radius:50%; background:radial-gradient(circle at center,var(--violet) 0 2px,transparent 2.5px),conic-gradient(from -65deg,transparent 0 275deg,var(--violet) 360deg); animation:composer-radar-rotate 2.8s linear infinite; }
.composer-radar-loader { display:grid; grid-template-columns:minmax(280px,1fr) minmax(230px,.85fr); align-items:center; gap:clamp(25px,6vw,72px); min-height:470px; padding:8px 5px 0; }
.composer-radar-scope { position:relative; container-type:size; width:min(100%,420px); aspect-ratio:1; margin:auto; overflow:hidden; border-radius:50%; background:var(--plum); box-shadow:0 28px 70px rgba(36,21,46,.2); isolation:isolate; }
.composer-radar-scope::before { content:""; position:absolute; inset:0; z-index:0; border-radius:50%; background:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 61%),repeating-radial-gradient(circle at center,transparent 0 23%,rgba(255,255,255,.075) 23.2% 23.45%,transparent 23.7% 25%); }
.composer-radar-ring { position:absolute; z-index:1; border:1px solid rgba(255,255,255,.18); border-radius:50%; pointer-events:none; }
.composer-radar-ring--outer { inset:8%; }
.composer-radar-ring--middle { inset:25%; }
.composer-radar-ring--inner { inset:42%; border-color:rgba(255,255,255,.25); }
.composer-radar-crosshair { position:absolute; z-index:1; background:rgba(255,255,255,.12); pointer-events:none; }
.composer-radar-crosshair--vertical { top:6%; bottom:6%; left:50%; width:1px; }
.composer-radar-crosshair--horizontal { right:6%; left:6%; top:50%; height:1px; }
.composer-radar-sweep { position:absolute; z-index:3; inset:0; border-radius:50%; background:conic-gradient(from -90deg,rgba(155,129,255,.06) 0deg,rgba(155,129,255,.12) 18deg,rgba(155,129,255,.34) 66deg,rgba(255,255,255,.78) 89.8deg,rgba(255,255,255,.78) 90deg,transparent 90.2deg,transparent 360deg); mix-blend-mode:screen; pointer-events:none; }
.composer-radar-loader.is-active .composer-radar-sweep { animation:composer-radar-rotate 3.8s linear infinite; }
/* The hand belongs to the sweep so its bright edge can never drift away from the 90° fan. */
.composer-radar-sweep::after { content:""; position:absolute; bottom:50%; left:calc(50% - 1px); width:2px; height:47%; border-radius:99px; background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,.08)); transform-origin:50% 100%; }
.composer-radar-hand { display:none; }
.composer-radar-center { position:absolute; z-index:5; top:calc(50% - 7px); left:calc(50% - 7px); width:14px; height:14px; border:3px solid var(--plum); border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.14),0 0 24px rgba(255,255,255,.75); animation:composer-radar-pulse 1.8s ease-in-out infinite; }
.composer-radar-hit { position:absolute; z-index:4; top:50%; left:50%; width:0; height:0; transform:rotate(var(--radar-angle)) translateY(calc(var(--radar-radius) * -1)); }
/* Each marker is timed to the sweep's 3.8s orbit, with a short reveal lag after the line passes. */
.composer-radar-hit i { position:absolute; top:-5px; left:-5px; display:block; width:10px; height:10px; border:2px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(155,129,255,.7); box-shadow:0 0 0 5px rgba(155,129,255,.12); opacity:0; transform-origin:center; }
.composer-radar-hit b { position:absolute; top:-8px; left:13px; display:block; color:rgba(255,255,255,.72); font-size:8px; font-weight:850; letter-spacing:.15em; white-space:nowrap; opacity:0; transform:rotate(calc(var(--radar-angle) * -1)); }
.composer-radar-loader.is-active .composer-radar-hit i { animation:composer-radar-hit-reveal 3.8s linear infinite; animation-delay:var(--radar-delay); }
.composer-radar-loader.is-active .composer-radar-hit b { animation:composer-radar-label-reveal 3.8s linear infinite; animation-delay:var(--radar-delay); }
.composer-radar-hit.is-target i { background:#fff; border-color:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.15),0 0 24px rgba(155,129,255,.95); }
.composer-radar-hit.is-target b,.composer-radar-hit.is-found b { color:#fff; }
.composer-radar-hit.is-found i { background:#9b81ff; box-shadow:0 0 0 5px rgba(155,129,255,.2),0 0 20px rgba(155,129,255,.7); }
.composer-radar-label { position:absolute; z-index:4; bottom:11%; left:0; width:100%; color:rgba(255,255,255,.52); font-size:8px; font-weight:850; letter-spacing:.2em; text-align:center; }
.composer-radar-copy { max-width:390px; }
.composer-radar-copy h2 { max-width:340px; margin:0 0 13px; font-size:clamp(34px,4.5vw,58px); line-height:.95; letter-spacing:-.065em; }
.composer-radar-copy > p:not(.eyebrow) { max-width:330px; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.composer-radar-scores { display:grid; gap:10px; margin-top:30px; }
.composer-radar-scores > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.composer-radar-scores span { color:var(--ink); font-size:12px; font-weight:750; }
.composer-radar-scores strong { color:var(--violet-dark); font-size:9px; font-weight:850; letter-spacing:.12em; }
.composer-radar-scores i { grid-column:1 / -1; display:block; height:4px; overflow:hidden; border-radius:99px; background:var(--line); }
.composer-radar-scores i b { display:block; width:48%; height:100%; border-radius:inherit; background:var(--violet); animation:composer-signal-search 1.25s ease-in-out infinite alternate; }
.composer-radar-scores > div:nth-child(2) i b { width:67%; animation-delay:-.5s; }.composer-radar-scores > div:nth-child(3) i b { width:34%; animation-delay:-.9s; }
.composer-radar-scores > div[data-state="locked"] i b { width:100%; background:#297c52; animation:none; }
.composer-radar-scores > div[data-state="locked"] strong { color:#297c52; }
.composer-stages { display:flex; flex-wrap:wrap; gap:8px; max-width:none; margin:5px 0 0; }
.composer-stages li { flex:1 1 190px; grid-template-columns:26px minmax(0,1fr) auto; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--page); }
.composer-stages li:last-child { border-bottom:1px solid var(--line); }
.composer-stages li[data-state="pending"] { opacity:.58; }
.composer-stages strong { font-size:12px; }
.composer-stages small { font-size:9px; font-weight:850; letter-spacing:.1em; }
.composer-stage-mark { width:21px; height:21px; }
.composer-stage-note { margin:15px 0 0; text-align:center; }
@keyframes composer-radar-rotate { to { transform:rotate(360deg); } }
@keyframes composer-radar-pulse { 50% { box-shadow:0 0 0 9px rgba(255,255,255,.06),0 0 28px rgba(255,255,255,.9); } }
@keyframes composer-radar-hit-reveal { 0%,2% { opacity:0; transform:scale(.35); } 6% { opacity:1; transform:scale(1.35); } 12% { opacity:1; transform:scale(1); } 25%,30%,100% { opacity:0; transform:scale(.88); } }
@keyframes composer-radar-label-reveal { 0%,2% { opacity:0; } 6%,12% { opacity:1; } 25%,30%,100% { opacity:0; } }
@keyframes composer-signal-search { from { transform:scaleX(.72); transform-origin:left; opacity:.55; } to { transform:scaleX(1); transform-origin:left; opacity:1; } }
@media (max-width:760px) {
  .composer-analysis-panel { min-height:0; }
  .composer-radar-loader { grid-template-columns:1fr; min-height:0; gap:30px; padding-top:18px; }
  .composer-radar-scope { width:min(100%,340px); }
  .composer-radar-copy { max-width:520px; margin:auto; text-align:center; }
  .composer-radar-copy h2,.composer-radar-copy > p:not(.eyebrow) { margin-right:auto; margin-left:auto; }
  .composer-radar-scores { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  .composer-radar-mini,.composer-radar-sweep,.composer-radar-hand,.composer-radar-center,.composer-radar-scores i b { animation-duration:0.001ms; animation-iteration-count:1; }
  .composer-radar-loader.is-active .composer-radar-hit i,.composer-radar-loader.is-active .composer-radar-hit b { animation:none; opacity:1; }
}

/* Die Canvas zeigt, was im Deck steht - Stichpunkte, die grosse Zahl, das echte Motiv. */









/* Auf der Zahlen-Slide traegt die Zahl, nicht die Zeile darunter. */


/* Ein Fehler gehoert an das Feld, um das es geht. */
.composer-field-status { min-height:0; margin:8px 0 0; color:var(--muted); font-size:12.5px; line-height:1.4; }
.composer-field-status:empty { display:none; }
.composer-field-status[data-tone="error"] { color:var(--danger); font-weight:650; }

/* Die eigene Idee ist die sechste Zeile, nicht eine Ausnahme daneben. */
.composer-topic-own { display:grid; gap:0; }
.composer-topic-own input { display:block; width:100%; box-sizing:border-box; margin:9px 0 0; padding:15px 19px; border:1px solid var(--violet); border-radius:13px; background:var(--input-bg); color:var(--ink); font:inherit; font-size:15px; font-weight:650; }
.composer-topic-own input.hidden { display:none; }

/* Der Streifen ist nur noch Rahmen und Auswahl - den Inhalt malt derselbe Renderer wie oben. */
.composer-thumbnail-rail button { padding:0 !important; flex:none; overflow:hidden; border:2px solid transparent !important; border-radius:12px; background:none !important; box-shadow:none !important; cursor:pointer; line-height:0; }
.composer-thumbnail-rail button.is-active { border-color:var(--violet) !important; }
.composer-canvas-mount { display:flex; justify-content:center; width:100%; min-width:0; }
.composer-canvas-mount .editable { outline:none; cursor:text; }
.composer-canvas-mount .editable:focus { background:rgba(112,74,255,.12); border-radius:4px; }

/* Das Kontingent ist zu Ende - das ist ein Angebot, keine Fehlermeldung, und sieht auch so aus. */
.composer-gate { width:min(92vw,470px); padding:0; border:1px solid var(--line); border-radius:23px; background:#fff; color:var(--ink); box-shadow:0 30px 90px rgba(29,20,58,.28); }
[data-theme="dark"] .composer-gate { background:#1c1c22; }
.composer-gate::backdrop { background:rgba(24,24,28,.42); backdrop-filter:blur(10px) saturate(.82); }
.composer-gate-card { position:relative; padding:34px 32px 30px; }
.composer-gate-card h2 { margin:0 0 10px; font-size:34px; letter-spacing:-.05em; line-height:1.04; }
.composer-gate-card .eyebrow { margin:0 0 13px; color:var(--violet); }
.composer-gate-lead { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.composer-gate-points { display:grid; gap:11px; margin:22px 0 0; padding:0; list-style:none; }
.composer-gate-points li { display:grid; grid-template-columns:19px 1fr; gap:11px; align-items:start; font-size:14px; line-height:1.4; }
.composer-gate-points li::before { content:'✓'; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:var(--violet); color:#fff; font-size:10px; }
.composer-gate-actions { display:flex; flex-wrap:wrap; gap:9px 18px; align-items:center; margin-top:26px; }
.composer-gate-actions .button { flex:0 0 auto; }
.composer-export [data-composer-export-action][hidden] { display:none !important; }
.composer-export-countdown { color:var(--muted); font-size:13px; font-weight:700; }
.composer-gate-close { position:absolute; top:16px; right:16px; width:30px; height:30px; padding:0 !important; border:0 !important; border-radius:50% !important; background:transparent !important; color:var(--muted) !important; box-shadow:none !important; font-size:21px; font-weight:500; line-height:1; cursor:pointer; }
.composer-gate-close:hover { background:var(--soft) !important; color:var(--ink) !important; }
.composer-gate-actions .text-link { position:static; width:auto; height:auto; border-radius:0 !important; background:none !important; color:var(--muted) !important; font-size:14px; font-weight:750; text-decoration:underline; text-underline-offset:3px; }
.composer-gate-actions .text-link:hover { background:none !important; color:var(--ink) !important; }
@media (max-width:600px) { .composer-gate-card { padding:28px 22px 24px; } .composer-gate-card h2 { font-size:29px; } .composer-gate-actions .button { width:100%; justify-content:center; } }

/* The source prompt is the quiet centre; the finished carousels orbit it like a small proof wall. */
.composer-intro-stage { position:relative; isolation:isolate; }
.composer-intro-stage > .composer-hero, .composer-intro-stage > .composer-layout { position:relative; z-index:1; }
.composer-hero { max-height:320px; overflow:hidden; transition:max-height .34s ease, opacity .24s ease, padding .34s ease; }
.composer-intro-stage.is-composer-condensed .composer-hero { max-height:0; padding-top:0; padding-bottom:0; opacity:0; pointer-events:none; }
.composer-slide-stack { position:absolute; z-index:0; width:146px; height:188px; pointer-events:none; }
.composer-slide-stack { transition:opacity .24s ease, visibility 0s linear .24s; }
.composer-intro-stage.is-composer-condensed .composer-slide-stack { visibility:hidden; opacity:0; }
.composer-slide-stack--control-agents { top:246px; left:clamp(-48px,calc(50% - 740px),1vw); }
.composer-slide-stack--mac-studio { top:458px; left:clamp(-48px,calc(50% - 740px),1vw); }
.composer-slide-stack--coding-agents { top:246px; right:clamp(-48px,calc(50% - 740px),1vw); }
.composer-slide-stack--huawei-watch { top:458px; right:clamp(-48px,calc(50% - 740px),1vw); }
.composer-slide-card { position:absolute; inset:0; overflow:hidden; margin:0; border:1px solid rgba(32,29,50,.16); border-radius:16px; background:#f0edf2; box-shadow:0 22px 42px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.09); transform-origin:50% 100%; }
.composer-slide-card img { display:block; width:100%; height:100%; object-fit:cover; }
.composer-slide-card--back { z-index:0; }
.composer-slide-card--middle { z-index:1; }
.composer-slide-card--front { z-index:2; }
/* Playing-card fan: the outer cards travel farther from the prompt and every card
   follows the direction of its side, so the stacks read as four separate decks. */
.composer-slide-stack--control-agents .composer-slide-card--back, .composer-slide-stack--mac-studio .composer-slide-card--back { transform:translate(-18px,10px) rotate(-18deg); }
.composer-slide-stack--control-agents .composer-slide-card--middle, .composer-slide-stack--mac-studio .composer-slide-card--middle { transform:translate(-8px,5px) rotate(-9deg); }
.composer-slide-stack--control-agents .composer-slide-card--front, .composer-slide-stack--mac-studio .composer-slide-card--front { transform:translate(0,1px) rotate(-3deg); }
.composer-slide-stack--coding-agents .composer-slide-card--back, .composer-slide-stack--huawei-watch .composer-slide-card--back { transform:translate(18px,10px) rotate(18deg); }
.composer-slide-stack--coding-agents .composer-slide-card--middle, .composer-slide-stack--huawei-watch .composer-slide-card--middle { transform:translate(8px,5px) rotate(9deg); }
.composer-slide-stack--coding-agents .composer-slide-card--front, .composer-slide-stack--huawei-watch .composer-slide-card--front { transform:translate(0,1px) rotate(3deg); }
@media (max-width:1180px) { .composer-slide-stack { display:none; } }

/* Die Quellenwahl steht jetzt auf Schritt 2, zwischen Überschrift und dem, was sie füllt. */

.composer-content-input { display:grid; gap:8px; margin-bottom:22px; }
.composer-content-input label { font-size:13px; font-weight:750; }
.composer-content-input input, .composer-content-input textarea { width:100%; box-sizing:border-box; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:var(--input-bg,var(--page)); color:var(--ink); font:inherit; font-size:15px; }
.composer-content-input textarea { min-height:150px; line-height:1.5; resize:vertical; }
.composer-content-input .composer-field-status { margin:0; }
/* Ein Startpunkt statt Hero, Erklaerspalte und Card-Ueberschrift nebeneinander: eine zentrierte
   Spalte, in der die Adresszeile das Erste ist, was man sieht. */
.composer-hero { max-width:680px; margin:0 auto; padding:38px 0 26px; text-align:center; }
.composer-hero h1 { margin:0 0 16px; font-size:clamp(44px,6vw,76px); line-height:.94; letter-spacing:-.06em; }
.composer-hero h1 em { color:var(--violet); font-style:normal; }
.composer-hero .lead { max-width:600px; margin:0 auto; color:var(--muted); font-size:16px; line-height:1.55; }
.composer-layout { max-width:860px; margin:0 auto; }
.composer-workspace { min-width:0; }
.composer-stepbar { justify-content:center; }
.composer-stepbar button { display:flex; align-items:center; gap:8px; min-height:20px; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--muted) !important; font:inherit; text-transform:inherit; cursor:pointer; }
.composer-stepbar button:disabled { cursor:default; opacity:.55; }
.composer-stepbar button:not(:disabled):hover { color:var(--ink) !important; }
.composer-stepbar button.is-current { color:var(--violet) !important; }
.composer-stepbar button.is-current b { border-color:var(--violet); background:var(--violet); color:#fff; }
.composer-stepbar button.is-done { color:var(--ink) !important; }
.composer-stepbar button.is-done b { position:relative; border-color:#297c52; background:#297c52; color:transparent; }
.composer-stepbar button.is-done b::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:11px; line-height:1; }
.composer-panel-heading { justify-content:center; margin-bottom:18px; }
[data-composer-source-form] { text-align:center; }
[data-composer-source-form] .composer-input-wrap { max-width:560px; margin:0 auto; text-align:left; }
[data-composer-source-form] > .button { margin-top:20px; }

/* Drei Wege, die wie Navigation funktionieren: Symbol, Aktion, Erklärung und ein klarer Weiter-Pfeil. */
.composer-mode-question { margin:0 0 16px; font-size:clamp(26px,3vw,34px); letter-spacing:-.045em; }
.composer-mode-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:26px; }
.composer-mode-cards button { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; align-items:start; min-height:118px; padding:18px; border:1px solid var(--line) !important; border-radius:15px; background:var(--page) !important; color:var(--ink) !important; box-shadow:none !important; font:inherit; text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.composer-mode-cards button strong { display:block; font-size:16px; font-weight:820; letter-spacing:-.025em; }
.composer-mode-cards button > span { display:grid; gap:7px; min-width:0; color:var(--ink); }
.composer-mode-cards button > span small { display:block; color:var(--muted); font-size:12.5px; line-height:1.45; }
.composer-mode-icon { display:grid; place-items:center; width:42px; height:42px; box-sizing:border-box; color:var(--violet); }
.composer-mode-icon svg { display:block; width:38px; height:38px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.45; }
.composer-mode-icon .icon-fill { fill:currentColor; stroke:none; }
.composer-mode-icon-discover svg { stroke-width:1.3; }
.composer-mode-icon-article svg { stroke-width:1.55; }
.composer-mode-icon-text svg { stroke-width:1.65; }
.composer-mode-cards button > b { align-self:center; color:var(--violet); font-size:23px; font-weight:500; line-height:1; transition:transform .18s ease; }
.composer-mode-cards button:hover { border-color:var(--violet) !important; background:color-mix(in srgb,var(--violet) 6%,var(--page)) !important; box-shadow:0 8px 20px rgba(53,33,100,.07) !important; }
.composer-mode-cards button:hover > b { transform:translateX(4px); }
.composer-mode-cards button.is-active { border:2px solid var(--violet) !important; background:color-mix(in srgb,var(--violet) 8%,var(--page)) !important; box-shadow:none !important; transform:none; }
.composer-mode-cards button.is-active .composer-mode-icon { color:var(--violet); }
.composer-mode-cards button.is-active strong { color:var(--ink); }
.composer-mode-cards button.is-active > b { display:grid; place-items:center; width:30px; height:30px; margin-top:1px; border-radius:50%; background:var(--violet); color:#fff; font-size:21px; }
.composer-mode-cards button.is-active:hover > b { transform:translateX(4px); }

.composer-panel-title { margin:0 0 6px; font-size:23px; font-weight:800; letter-spacing:-.045em; }
.composer-results-lead { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.5; }

/* Ein Winkel ist Titel plus der Satz, warum er von dieser Seite kommt. */
.composer-topic-list button { align-items:flex-start; }
.composer-topic-list button i { margin-top:2px; }
.composer-topic-list button span { display:grid; gap:4px; }
.composer-topic-list button span strong { font-size:15px; font-weight:720; letter-spacing:-.01em; }
.composer-topic-list button span small { color:var(--muted); font-size:12.5px; font-weight:500; line-height:1.45; }
@media (max-width:700px) { .composer-mode-cards { grid-template-columns:1fr; } .composer-hero { padding:24px 0 18px; } }

/* The Composer story is a journey: each stop pairs one clear explanation with a real project
   from the same slide catalogue used around the prompt above. */
.composer-journey { position:relative; margin-top:70px; }
.composer-journey::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line); transform:translateX(-50%); }
.composer-journey-step { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(35px,7vw,92px); align-items:center; padding:76px 0; border-top:1px solid var(--line); }
.composer-journey-step:first-child { border-top:0; }
.composer-journey-step-reverse .composer-journey-copy { grid-column:2; grid-row:1; }
.composer-journey-step-reverse .composer-journey-media { grid-column:1; grid-row:1; }
.composer-journey-copy { padding:0 24px; }
.composer-journey-number { display:grid; place-items:center; width:34px; height:34px; margin-bottom:24px; border:1px solid var(--violet); border-radius:50%; color:var(--violet); font-size:11px; font-weight:850; letter-spacing:.08em; }
.composer-journey-copy .eyebrow { margin-bottom:14px; color:var(--violet); }
.composer-journey-copy h3 { max-width:440px; margin:0 0 15px; font-size:clamp(28px,3.4vw,45px); line-height:.98; letter-spacing:-.06em; }
.composer-journey-copy > p:not(.eyebrow) { max-width:460px; margin:0; color:var(--muted); font-size:15px; line-height:1.62; }
.composer-journey-list { display:grid; gap:9px; margin:24px 0 0; padding:0; list-style:none; }
.composer-journey-list li { position:relative; padding-left:20px; color:var(--ink); font-size:13px; line-height:1.45; }
.composer-journey-list li::before { content:'→'; position:absolute; left:0; color:var(--violet); font-weight:800; }
.composer-journey-media { min-width:0; margin:0; }
.composer-journey-slides { position:relative; width:min(100%,360px); aspect-ratio:4 / 5; margin:0 auto; }
.composer-journey-slides img { position:absolute; inset:0; display:block; width:100%; height:100%; border:1px solid rgba(32,29,50,.14); border-radius:19px; background:#f0edf2; object-fit:cover; box-shadow:0 24px 46px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.09); }
.composer-journey-slides img:nth-child(1) { transform:translate(23px,12px) rotate(10deg); }
.composer-journey-slides img:nth-child(2) { transform:translate(11px,6px) rotate(5deg); }
.composer-journey-slides img:nth-child(3) { transform:translate(0,0) rotate(-1deg); }
.composer-journey-step-reverse .composer-journey-slides img:nth-child(1) { transform:translate(-23px,12px) rotate(-10deg); }
.composer-journey-step-reverse .composer-journey-slides img:nth-child(2) { transform:translate(-11px,6px) rotate(-5deg); }
.composer-journey-step-reverse .composer-journey-slides img:nth-child(3) { transform:translate(0,0) rotate(1deg); }
.composer-journey-media figcaption { display:grid; gap:4px; max-width:360px; margin:50px auto 0; padding:0 4px; }
.composer-journey-media figcaption strong { font-size:15px; letter-spacing:-.02em; }
.composer-journey-media figcaption span { color:var(--muted); font-size:12px; line-height:1.45; }
.cutout-source-note { margin:22px 0 -16px; color:var(--muted); font-size:12px; line-height:1.45; letter-spacing:.01em; }
.cutout-source-note::before { content:'•'; display:inline-block; margin-right:8px; color:var(--violet); font-size:16px; line-height:0; vertical-align:-1px; }
.cutout-journey-step-final { grid-template-rows:auto auto; row-gap:0; }
.cutout-journey-step-final .composer-journey-copy { grid-column:1; grid-row:1; }
.cutout-journey-step-final .composer-journey-media { grid-column:2; grid-row:1; }
.cutout-journey-step-final > .cutout-source-note { grid-column:1 / -1; grid-row:2; align-self:end; margin:0; padding-top:34px; color:#85858d; font-size:11px; transform:none; }
.cutout-journey-compare { width:min(100%,520px); margin:0 auto; padding-top:24px; overflow:hidden; border:1px solid var(--line); border-radius:19px; background:var(--surface); box-shadow:0 24px 46px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.07); }
.cutout-journey-compare img { display:block; width:100%; height:auto; border:0; border-radius:0; background:transparent; box-shadow:none; }
.cutout-journey-media .cutout-journey-compare + figcaption { margin-top:22px; }
[data-theme="dark"] .cutout-journey-compare img { background:var(--surface); }
.composer-faq { max-width:920px; margin:88px auto 0; padding-top:72px; border-top:1px solid var(--line); }
.composer-faq-heading { margin-bottom:30px; }
.composer-faq-heading .eyebrow { margin-bottom:13px; color:var(--violet); }
.composer-faq-heading h2 { max-width:620px; margin:0 0 13px; font-size:clamp(35px,4.5vw,58px); line-height:.98; letter-spacing:-.065em; }
.composer-faq-heading > p:last-child { max-width:610px; margin:0; color:var(--muted); font-size:16px; line-height:1.58; }
.composer-faq-list { border-top:1px solid var(--line); }
.composer-faq-list details { border-bottom:1px solid var(--line); }
.composer-faq-list summary { display:flex; justify-content:space-between; gap:20px; padding:22px 4px; cursor:pointer; list-style:none; font-size:18px; font-weight:750; letter-spacing:-.02em; }
.composer-faq-list summary::-webkit-details-marker { display:none; }
.composer-faq-list summary::after { content:'+'; flex:0 0 auto; color:var(--violet); font-size:25px; font-weight:400; }
.composer-faq-list details[open] summary::after { content:'−'; }
.composer-faq-list details p { max-width:760px; margin:0; padding:0 45px 23px 4px; color:var(--muted); font-size:15px; line-height:1.6; }
.composer-product-banner { margin:84px auto 0; padding:58px 9%; border:1px solid var(--line); border-radius:28px; background-color:#f3ebdd; background-image:url('/assets/carousel-foundation-banner-v1-modern-comic.png'); background-position:center; background-size:cover; box-shadow:0 26px 90px rgba(53,33,100,.08); color:var(--ink); text-align:center; }
.composer-product-banner .composer-closing-banner-copy { position:relative; z-index:1; display:table; width:fit-content; max-width:calc(100% - 16px); margin:0 auto; padding:8px 14px 11px; border:1px solid rgba(23,24,27,.08); border-radius:15px; background-color:rgba(250,249,246,.96); background-image:radial-gradient(circle,rgba(23,24,27,.15) 1px,transparent 1.2px); background-size:15px 15px; box-shadow:0 10px 30px rgba(53,33,100,.06); }
.composer-product-banner .composer-closing-banner-copy p { margin-bottom:0; }
.composer-product-banner .composer-closing-banner-copy p:not(.eyebrow) { color:var(--muted); }
.composer-product-banner .hero-actions { position:relative; z-index:1; justify-content:center; margin-top:26px; }
.composer-product-banner .button-light { background:var(--ink); color:#fff; }
.composer-product-banner .button-light:hover { background:var(--violet-dark); }
html:has(body[data-seo-page="carousel-composer"]), body[data-seo-page="carousel-composer"] { overflow-x:hidden; }
@media (max-width:900px) {
  .composer-journey::before { left:17px; }
  .composer-journey-step, .composer-journey-step-reverse { grid-template-columns:1fr; gap:40px; padding:58px 0; }
  .composer-journey-step-reverse .composer-journey-copy, .composer-journey-step-reverse .composer-journey-media { grid-column:auto; grid-row:auto; }
  .composer-journey-copy { padding:0 0 0 50px; }
  .composer-journey-media { padding-left:50px; }
  .composer-journey-slides { margin-left:0; }
  .composer-journey-media figcaption { margin-left:0; }
  .cutout-journey-step-final { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .cutout-journey-step-final .composer-journey-copy, .cutout-journey-step-final .composer-journey-media, .cutout-journey-step-final > .cutout-source-note { grid-column:auto; }
  .cutout-journey-step-final .composer-journey-copy { grid-row:1; }
  .cutout-journey-step-final .composer-journey-media { grid-row:2; }
  .cutout-journey-step-final > .cutout-source-note { grid-row:3; }
}
@media (max-width:700px) {
  .composer-product-banner { margin-top:54px; padding:46px 23px; }
}
@media (max-width:600px) {
  .composer-journey { margin-top:44px; }
  .composer-journey-step, .composer-journey-step-reverse { gap:32px; padding:45px 0; }
  .composer-journey-copy { padding-left:43px; }
  .composer-journey-number { position:absolute; top:45px; left:0; width:32px; height:32px; margin:0; }
  .composer-journey-copy h3 { font-size:31px; }
  .composer-journey-copy > p:not(.eyebrow) { font-size:14px; }
  .composer-journey-media { padding-left:43px; }
  .composer-journey-slides { width:calc(100% - 36px); }
  .cutout-journey-compare { width:100%; padding-top:20px; }
  .composer-faq { margin-top:60px; padding-top:52px; }
  .composer-faq-list summary { padding:18px 2px; font-size:16px; }
  .composer-faq-list details p { padding:0 31px 20px 2px; font-size:14px; }
}

/* Keep the complete Compose decision surface in one desktop viewport. The list becomes
   a compact two-column board, while the mobile layout keeps its readable single column. */
@media (min-width:761px) {
  .composer-intro-stage.is-composer-condensed .composer-stepbar { margin-bottom:12px; padding-bottom:10px; }
  .composer-compose { padding:26px 28px; }
  .composer-brand-card { margin-bottom:22px; padding:12px 14px; }
  .composer-results-heading > div > p:not(.eyebrow) { margin-bottom:18px; }
  .composer-mode-cards { margin-bottom:18px; }
  .composer-mode-cards button { min-height:104px; padding:15px 14px; }
  .composer-mode-cards button strong { font-size:15px; }
  .composer-mode-cards button span { font-size:12px; line-height:1.35; }
  .composer-topic-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .composer-topic-list > button { min-height:64px; padding:12px 13px; font-size:13px; }
  .composer-topic-list > button span strong { font-size:13.5px; }
  .composer-topic-list > button span small { font-size:11px; line-height:1.3; }
  .composer-topic-list [data-composer-own-row] { grid-column:1 / -1; }
  .composer-topic-list [data-composer-own-row] > button { padding:12px 13px; font-size:13px; }
  .composer-compose-actions { margin-top:16px; }
}

@media (max-width:760px) {
  .composer-topic-list { grid-template-columns:1fr; }
}

/* Cutout keeps the Composer's calm, centred workspace while moving inference to the visitor's device. */
body[data-seo-page="cutout"] #marketing-page, body[data-seo-page="cutout"] #pricing-page, body[data-seo-page="cutout"] #use-your-own-ai-page, body[data-seo-page="cutout"] #carousel-composer-page, body[data-seo-page="cutout"] #clips-page, body[data-seo-page="cutout"] #account-page { display:none !important; }
body[data-seo-page="cutout"] #cutout-page { display:block !important; }
html:has(body[data-seo-page="cutout"]), body[data-seo-page="cutout"] { overflow-x:hidden; }
.cutout-page { max-width:1000px; margin:0 auto; padding:8px 0 72px; }
.cutout-hero { max-width:720px; margin:0 auto; padding:38px 0 26px; text-align:center; }
.cutout-hero h1 { margin:0 0 16px; font-size:clamp(44px,6vw,76px); line-height:.94; letter-spacing:-.06em; }
.cutout-hero h1 em, .cutout-panel h2 em { color:var(--violet); font-style:normal; }
.cutout-hero .lead { max-width:650px; margin:0 auto; color:var(--muted); font-size:16px; line-height:1.55; }
.cutout-layout { max-width:860px; }
.cutout-stepbar { justify-content:center; }
.cutout-panel { text-align:center; }
.cutout-panel-heading { justify-content:space-between; margin-bottom:24px; text-align:left; }
.cutout-panel-heading h2 { margin:0; font-size:clamp(31px,4vw,48px); line-height:.98; letter-spacing:-.055em; }
.cutout-upload-heading { position:relative; display:block; text-align:center; }
.cutout-upload-heading > div { text-align:center; }
.cutout-upload-heading > .composer-counter { position:absolute; top:0; right:0; }
.cutout-dropzone { display:grid; justify-items:center; gap:7px; min-height:250px; box-sizing:border-box; padding:36px 22px; border:1px dashed color-mix(in srgb,var(--violet) 42%,var(--line)); border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 7%,var(--page)),color-mix(in srgb,#efb56b 9%,var(--page))); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.cutout-dropzone:hover, .cutout-dropzone.is-dragover { border-color:var(--violet); background:color-mix(in srgb,var(--violet) 10%,var(--page)); transform:translateY(-1px); }
.cutout-dropzone:focus-visible { outline:3px solid color-mix(in srgb,var(--violet) 35%,transparent); outline-offset:4px; }
.cutout-dropzone strong { margin-top:4px; font-size:22px; letter-spacing:-.03em; }
.cutout-dropzone > span { color:var(--muted); font-size:13px; }
.cutout-dropzone .button { margin-top:13px; }
.cutout-drop-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:17px; background:var(--violet); color:#fff; box-shadow:0 12px 28px rgba(112,74,255,.2); }
.cutout-drop-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.cutout-privacy-note { display:flex; justify-content:center; gap:8px; margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.cutout-privacy-note span { color:var(--violet); }
.cutout-panel .composer-form-status { margin-top:10px; }
.cutout-result { text-align:left; }
.cutout-result-heading { align-items:center; }
.cutout-result-heading-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:11px 15px; }
.cutout-change-button { min-height:0; padding:0; color:var(--violet-dark); font-size:12px; }
.cutout-result-heading h2 { margin:0; font-size:clamp(31px,4vw,48px); line-height:.98; letter-spacing:-.055em; }
.cutout-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cutout-preview-card { min-width:0; margin:0; }
.cutout-preview-card figcaption { margin-bottom:9px; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.cutout-preview-frame { display:grid; place-items:center; aspect-ratio:1 / 1; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--page); }
.cutout-preview-frame img { display:block; width:100%; height:100%; max-height:440px; object-fit:contain; }
.cutout-result-placeholder { max-width:180px; color:var(--muted); font-size:13px; line-height:1.45; text-align:center; }
.cutout-checker { background-color:#f7f7f7; background-image:linear-gradient(45deg,#e4e4e4 25%,transparent 25%),linear-gradient(-45deg,#e4e4e4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e4e4 75%),linear-gradient(-45deg,transparent 75%,#e4e4e4 75%); background-position:0 0,0 10px,10px -10px,-10px 0; background-size:20px 20px; }
.cutout-result-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.cutout-download-card { margin-top:20px; }
.cutout-download-actions { display:flex; flex-wrap:wrap; gap:9px; }
.cutout-download-actions .button { white-space:nowrap; }
.cutout-export-note { min-height:19px; margin:11px 0 0; color:var(--muted); font-size:12px; }
[data-theme="dark"] .cutout-checker { background-color:#282828; background-image:linear-gradient(45deg,#3a3a3a 25%,transparent 25%),linear-gradient(-45deg,#3a3a3a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#3a3a3a 75%),linear-gradient(-45deg,transparent 75%,#3a3a3a 75%); }
@media (max-width:700px) {
  .cutout-page { padding-top:0; }
  .cutout-hero { padding:24px 0 18px; }
  .cutout-panel { padding:22px 17px; }
  .cutout-panel-heading { display:block; }
  .cutout-panel-heading .composer-counter { display:inline-block; margin-top:14px; }
  .cutout-upload-heading > .composer-counter { position:static; }
  .cutout-result-heading-actions { justify-content:flex-start; margin-top:15px; }
  .cutout-preview-grid { grid-template-columns:1fr; }
  .cutout-preview-frame { min-height:220px; }
  .cutout-result-actions { display:grid; }
.cutout-result-actions .button { width:100%; }
  .cutout-download-card { display:block; }
  .cutout-download-actions { margin-top:17px; }
  .cutout-download-actions .button { flex:1; }
  .cutout-privacy-note { text-align:left; }
}

.cutout-closing-cta { margin-right:auto; margin-left:auto; padding:58px 9%; border-radius:28px; background:var(--surface); color:var(--ink); text-align:center; }
.cutout-closing-cta h2 { max-width:760px; margin:0 auto 14px; font-size:clamp(40px,5vw,68px); line-height:.98; letter-spacing:-.065em; }
.cutout-closing-cta p:not(.eyebrow) { max-width:610px; margin:0 auto; color:var(--muted); font-size:16px; line-height:1.55; }
.cutout-closing-cta .hero-actions { justify-content:center; margin-top:26px; }
.cutout-product-banner { border:1px solid var(--line); background-color:#f3ebdd; background-image:url('/assets/cutout-foundation-banner-v1-modern-comic.png'); background-position:center; background-size:cover; box-shadow:0 26px 90px rgba(53,33,100,.08); }
.cutout-product-banner .cutout-closing-banner-copy { position:relative; z-index:1; display:table; width:fit-content; max-width:calc(100% - 16px); margin:0 auto; padding:8px 14px 11px; border:1px solid rgba(23,24,27,.08); border-radius:15px; background-color:rgba(250,249,246,.96); background-image:radial-gradient(circle,rgba(23,24,27,.15) 1px,transparent 1.2px); background-size:15px 15px; box-shadow:0 10px 30px rgba(53,33,100,.06); }
.cutout-product-banner .cutout-closing-banner-copy p { margin-bottom:0; }
.cutout-product-banner .cutout-closing-banner-copy p:not(.eyebrow) { color:var(--muted); }
.cutout-product-banner .hero-actions { position:relative; z-index:1; }
.cutout-product-banner .button-light { background:var(--ink); color:#fff; }
.cutout-product-banner .button-light:hover { background:var(--violet-dark); }
@media (max-width:700px) {
  .cutout-closing-cta { padding:46px 23px; }
}

@media (min-width:1050px) {
  .composer-compose { padding-top:16px; padding-bottom:10px; }
  .composer-brand-card { margin-bottom:12px; padding:10px 12px; }
  .composer-topic-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .composer-topic-list > button { min-height:0; padding:10px 10px; gap:9px; }
  .composer-topic-list > button i { width:19px; height:19px; }
  .composer-topic-list > button span { gap:2px; }
  .composer-topic-list > button span strong { font-size:12px; line-height:1.18; }
  .composer-topic-list > button span small { font-size:10px; line-height:1.24; }
  .composer-topic-list [data-composer-own-row] > button { padding:10px; }
  .composer-compose-actions { margin-top:10px; }
}

/* Preview needs the page width that the editor actually has. Keep the slide readable at its
   deliberate size, but use the reclaimed side space for the utility rows instead of stacking
   every control underneath the canvas. */
@media (min-width:1181px) {
  body:has(.composer-preview:not(.hidden)) .composer-intro-stage { margin-top:-18px; }
  body:has(.composer-preview:not(.hidden)) .site-shell { max-width:none; }
  body:has(.composer-preview:not(.hidden)) .carousel-composer-page { max-width:none; padding-right:28px; padding-left:28px; }
  .composer-layout:has(.composer-preview:not(.hidden)) { width:100%; max-width:none; }
  .composer-preview { padding:22px 28px 26px; display:grid; grid-template-columns:465px 210px minmax(240px,1fr); grid-template-rows:auto var(--composer-preview-editor-row,auto) minmax(178px,auto); column-gap:28px; justify-content:start; }
  .composer-preview-heading { margin-bottom:18px; }
  .composer-preview-heading p:not(.eyebrow) { display:none; }
  .composer-preview-heading { grid-column:1 / -1; grid-row:1; }
  .composer-editor-layout { display:contents; }
  .composer-canvas-mount { grid-column:1; grid-row:2 / span 2; align-self:start; justify-content:flex-start; }
  .composer-phone-view { grid-column:1; grid-row:2 / span 2; align-self:start; justify-content:flex-start; }
  /* The inspector is taller than the upper utility row once image controls are open. Let it use
     the same lower grid row as the thumbnail rail; its intrinsic height can then expand that row
     when needed instead of clipping the controls behind a scrollbar-sized box. */
  .composer-editor-controls { grid-column:2; grid-row:2 / span 2; align-self:start; overflow:visible; }
  .composer-look-panel { display:block; grid-column:3; grid-row:2; margin-top:0; }
  .composer-look-controls { gap:12px; }
  .composer-look-controls > div { grid-template-columns:1fr; gap:7px; }
  /* Column 2 only (not `2 / -1`): the thumbnail rail used to share column 2 with the editor
     controls above it - harmless while that column's content fit its row, but the moment it
     didn't (see the comment above), the overflow spilled straight into this rail's own space.
     Column 3 keeps it clear of that column entirely, and it was always wide enough on its own
     for a horizontally-scrolling strip of fixed-width thumbnails. */
  .composer-thumbnail-rail { grid-column:3; grid-row:3; width:100%; margin-top:24px; align-self:start; }
  .composer-palette-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; overflow:visible; padding-bottom:0; }
  .composer-palette-row button { min-width:0; width:100%; }
  .composer-palette-row i { width:100%; height:28px; }
  /* Several later, equal-specificity rules for this same class (a 5-column grid at 761px+, a
     3-column one at 1500px+) sit further down the file and would otherwise win the cascade over
     this earlier block on source order alone - `!important` is this file's own existing pattern
     for exactly that fight (see the `.composer-preset-row button` rules already using it a few
     lines below the 761px rule). Fine for exactly five presets, but there are ten, so a fixed grid
     wrapped them into two full rows here. One scrolling row keeps every preset a single,
     predictable swipe away instead of splitting them across a grid whose row break has nothing to
     do with how the presets are grouped. */
  .composer-preset-row { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; padding-bottom:6px; }
  .composer-preset-row button,
  .composer-preset-row button.is-selected { flex:0 0 104px !important; width:104px !important; padding:7px 9px; }
  /* Moved below the download banner (was row 5, now row 4): a visitor finishing the download
     banner reads it as "done for now", and the caption composer used to sit above that banner,
     between it and the presets - read as part of the styling step it doesn't belong to instead of
     the natural next thing to do once the carousel itself is settled. */
  .composer-preview .composer-download-card { grid-column:1 / -1; grid-row:4; margin-top:18px; padding:17px 22px; }
  .composer-preview .composer-download-card h3 { font-size:19px; }
  .composer-preview .composer-download-card p:not(.eyebrow) { font-size:12px; }
  .composer-preview .composer-download-card .button { padding:11px 17px; font-size:14px; }
  .composer-caption-card { grid-column:1 / -1; grid-row:5; margin-top:18px; }
}

/* Presets show the actual first-class renderer at a glance, so the choice is visual as well as
   semantic. The small frame is clipped inside the control and never receives editing focus. */
.composer-preset-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.composer-preset-row button { display:grid; gap:7px; width:100%; min-width:0; padding:7px; text-align:left; }
.composer-preset-preview { display:flex; justify-content:center; width:100%; height:90px; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--page); pointer-events:none; }
.composer-preset-preview > div { flex:none; }
.composer-preset-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:1500px) {
  .composer-preset-row { grid-template-columns:repeat(3,minmax(0,132px)); }
}

/* "Write my own" is the sixth topic tile, not a full-width form row. The input still gets
   the whole board when it is opened, while the trigger stays in the same grid as the five ideas. */
.composer-topic-list [data-composer-own-row] { display:contents; }
.composer-topic-list [data-composer-own-row] > button { grid-column:auto; }
.composer-topic-list [data-composer-own-row] > input { grid-column:1 / -1; }

/* The preview repeats the same progress controls beside its heading. Only the field outline
   is added here; the step labels, circles and state colours continue to come from stepbar. */
.composer-preview-stepbar { flex:0 1 390px; gap:8px; margin:0; padding:0; border:0; }
.composer-preview-stepbar button { flex:1 1 0; justify-content:center; padding:10px 8px !important; border:1px solid var(--line) !important; border-radius:12px !important; background:transparent !important; }
.composer-preview-stepbar button:not(:disabled):hover { border-color:var(--violet) !important; }
@media (max-width:600px) {
  .composer-preview-stepbar { width:100%; max-width:none; margin-top:18px; }
  .composer-preview-stepbar button { gap:5px; padding:9px 5px !important; font-size:8px; }
}

/* Keep all five palette blocks on one rhythm. The outer blocks use a straight clipped edge;
   only the four inner separators carry the shared slant. */
.composer-brand-colours i:first-child { flex-grow:1; margin-left:0; clip-path:polygon(0 0,100% 0,78% 100%,0 100%); }
.composer-brand-colours i:last-child { flex-grow:1; margin-right:0; clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); }

/* The large radar is the primary loading animation; the top bar carries copy and cancel only. */
.composer-busybar { grid-template-columns:minmax(0,1fr) auto auto; }
@media (max-width:600px) {
  .composer-busybar { grid-template-columns:minmax(0,1fr) auto; }
}

/* Make the application preview read as a separate surface from the dotted page. The rendered
   slide gets its own adaptive edge too, without changing the artwork that is exported. */
.composer-preview {
  border-color:color-mix(in srgb,var(--ink) 22%,transparent);
  box-shadow:0 18px 58px rgba(24,20,32,.08);
}
.composer-canvas-mount > div {
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--canvas-ink) 22%,transparent);
  box-shadow:0 4px 16px color-mix(in srgb,var(--canvas-ink) 12%,transparent) !important;
}
.composer-thumbnail-rail {
  box-sizing:border-box;
  border:1px solid rgba(25,24,30,.22);
  background:color-mix(in srgb,var(--ink) 7%,var(--surface-solid));
  box-shadow:0 4px 18px rgba(25,24,30,.10);
  overscroll-behavior-x:contain;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pinch-zoom;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.composer-thumbnail-rail::-webkit-scrollbar { display:none; width:0; height:0; }

/* Presets are compact, visual choices: the preview itself owns the single frame and the
   label sits below it without consuming space inside that frame. The whole button stays
   clickable, but its old card border no longer creates a misleading double outline. */
.composer-preset-row button,
.composer-preset-row button.is-selected {
  display:grid;
  gap:8px;
  width:100%;
  min-width:0;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:center;
}
.composer-preset-preview {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--page);
  pointer-events:none;
}
.composer-preset-preview > div {
  width:100% !important;
  height:100% !important;
  border-radius:9px !important;
}
.composer-preset-row button.is-selected .composer-preset-preview {
    border-color:var(--violet);
    box-shadow:inset 0 0 0 1px var(--violet);
}
.composer-preset-label {
  display:block;
  min-width:0;
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:750;
  line-height:1.2;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Keep the visual controls subordinate to the editor. The look panel may have a wide grid
   column, but its choices should retain compact control sizes instead of stretching into the
   carousel row below. */
@media (min-width:761px) {
  .composer-palette-row {
    display:flex;
    flex-wrap:nowrap;
    width:max-content;
    max-width:100%;
    gap:12px;
    overflow:visible;
  }
  .composer-palette-row button {
    flex:0 0 68px;
    width:68px;
  }
  .composer-palette-row i {
    width:68px;
    height:30px;
  }
  .composer-preset-row {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,132px));
    width:max-content;
    max-width:100%;
    gap:10px;
  }
  .composer-preset-row button,
  .composer-preset-row button.is-selected {
    width:132px;
  }
  .composer-preset-preview {
    width:132px;
    height:165px;
  }
}
@media (max-width:760px) and (min-width:601px) {
  .composer-preset-row {
    grid-template-columns:repeat(3,minmax(0,132px));
    width:max-content;
    max-width:100%;
  }
  .composer-preset-row button,
  .composer-preset-row button.is-selected,
  .composer-preset-preview {
    width:132px;
  }
  .composer-preset-preview { height:165px; }
}
@media (max-width:600px) {
  .composer-palette-row {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:2px 2px 5px;
    scrollbar-width:none;
  }
  .composer-palette-row::-webkit-scrollbar { display:none; }
  .composer-palette-row button { flex:0 0 62px; width:62px; }
  .composer-palette-row i { width:62px; height:28px; }
  .composer-preset-row { grid-template-columns:repeat(2,minmax(0,132px)); }
  .composer-preset-row button,
  .composer-preset-row button.is-selected,
  .composer-preset-preview { width:132px; }
  .composer-preset-preview { height:165px; }
}

/* Keep the phone preview action with the render settings instead of competing with the
   progress navigation in the heading. Smaller preset tiles leave a clear breathing room
   before the carousel rail. */
.composer-editor-controls > .composer-phone-toggle {
  display:flex;
  width:100%;
  justify-content:center;
  margin-top:10px;
}
@media (min-width:761px) {
  .composer-preset-row {
    grid-template-columns:repeat(5,minmax(0,104px));
    gap:8px;
    margin-bottom:18px;
  }
  .composer-preset-row button,
  .composer-preset-row button.is-selected,
  .composer-preset-preview {
    width:104px;
  }
  .composer-preset-preview { height:130px; }
}
@media (max-width:760px) and (min-width:601px) {
  .composer-preset-row { gap:8px; margin-bottom:18px; }
  .composer-preset-row button,
  .composer-preset-row button.is-selected,
  .composer-preset-preview { width:112px; }
  .composer-preset-preview { height:140px; }
}

/* Keep the vertical render settings compact. The slider is part of the same control group,
   so its label and track should not create a large second block below the checkboxes. */
.composer-editor-controls > p.eyebrow {
  margin-bottom:8px;
  line-height:1.1;
}
.composer-editor-controls fieldset {
  gap:8px;
  padding:10px 0;
}
.composer-editor-controls legend {
  margin-bottom:5px;
}
.composer-editor-controls fieldset > label {
  gap:7px;
  line-height:1.15;
}
.composer-editor-controls fieldset > label input {
  width:15px;
  height:15px;
}
.composer-logo-scale {
  margin-top:2px;
  padding-top:9px;
}
.composer-range-wrap {
  padding-top:5px;
}

/* Align the style choices with the preset row below. The selected palette outline has its
   own offset, so compensate on the row instead of changing individual button dimensions. */
.composer-look-controls .composer-palette-row {
  margin-left:-12px;
}

/* Preset previews are a horizontal rail, just like the slide thumbnails. The older
   `width:max-content` grid made the grid item keep the row's full ten-card width as its minimum
   size, so the look panel itself expanded past the Composer surface instead of giving the row
   something to scroll inside. */
.composer-look-controls > div {
  min-width:0;
}
.composer-preset-row {
  display:flex !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pinch-zoom;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.composer-preset-row::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}
.composer-preset-row button,
.composer-preset-row button.is-selected {
  flex:0 0 104px !important;
  width:104px !important;
}
@media (max-width:760px) and (min-width:601px) {
  .composer-preset-row button,
  .composer-preset-row button.is-selected {
    flex-basis:112px !important;
    width:112px !important;
  }
}
@media (max-width:600px) {
  .composer-preset-row button,
  .composer-preset-row button.is-selected {
    flex-basis:132px !important;
    width:132px !important;
  }
}

.composer-download-action {
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
}
.composer-download-action .composer-download-note {
  text-align:center;
}
.composer-download-note[hidden],
.composer-download-note.hidden {
  display:none !important;
}
@media (max-width:600px) {
  .composer-download-action {
    margin-top:18px;
  }
  .composer-download-card .button {
    margin-top:0;
  }
}

.composer-caption-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,1.2fr);
  gap:24px;
  margin-top:26px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}
.composer-caption-intro h3 {
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:-.04em;
}
.composer-caption-controls {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-content:start;
}
.composer-caption-controls fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.composer-caption-controls legend {
  margin-bottom:8px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.composer-caption-controls label {
  position:relative;
  display:flex;
  align-items:center;
  min-height:70px;
  padding:13px 42px 13px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--page);
  color:var(--ink);
  font-size:12px;
  font-weight:750;
  line-height:1.25;
  cursor:pointer;
}
.composer-caption-platform-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.composer-caption-temperature-fieldset {
  padding:14px 15px 12px !important;
  border:1px solid var(--line) !important;
  border-radius:12px;
  background:var(--page);
}
.composer-caption-temperature-fieldset legend {
  margin-bottom:0;
}
.composer-caption-temperature-fieldset input[type="range"] {
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  height:20px;
  margin:0;
  padding:0;
  border:0;
  box-sizing:border-box;
  border-radius:99px;
  outline:none;
  background:linear-gradient(90deg,var(--violet) 0 var(--caption-temperature-progress,56%),var(--line) var(--caption-temperature-progress,56%) 100%);
  cursor:pointer;
}
.composer-caption-temperature-fieldset input[type="range"]::-webkit-slider-runnable-track {
  height:8px;
  border-radius:99px;
  background:transparent;
}
.composer-caption-temperature-fieldset input[type="range"]::-moz-range-track {
  height:8px;
  border-radius:99px;
  background:transparent;
}
.composer-caption-temperature-fieldset input[type="range"]::-webkit-slider-thumb {
  width:20px;
  height:20px;
  margin-top:-6px;
  appearance:none;
  -webkit-appearance:none;
  border:3px solid var(--surface);
  border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 0 1px var(--violet),0 3px 8px rgba(72,42,170,.25);
}
.composer-caption-temperature-fieldset input[type="range"]::-moz-range-progress {
  height:8px;
  border-radius:99px;
  background:var(--violet);
}
.composer-caption-temperature-fieldset input[type="range"]::-moz-range-thumb {
  width:15px;
  height:15px;
  border:3px solid var(--surface);
  border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 0 1px var(--violet),0 3px 8px rgba(72,42,170,.25);
}
.composer-caption-temperature-fieldset input[type="range"]:focus-visible {
  outline:2px solid color-mix(in srgb,var(--violet) 65%,transparent);
  outline-offset:3px;
}
.composer-caption-temperature-fieldset input[type="range"]:active {
  cursor:grabbing;
}
.composer-caption-temperature-scale {
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.composer-caption-temperature-note {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
.composer-caption-controls label:has(input:checked) {
  border-color:var(--violet);
  background:color-mix(in srgb,var(--violet) 7%,var(--page));
  box-shadow:inset 0 0 0 1px var(--violet), 0 5px 14px color-mix(in srgb,var(--violet) 10%,transparent);
}
.composer-caption-controls label input {
  position:absolute;
  top:15px;
  right:15px;
  width:18px;
  height:18px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  accent-color:var(--violet);
  margin:0;
}
.composer-caption-controls label span { display:grid; gap:5px; }
.composer-caption-controls label strong { font-size:14px; line-height:1.15; }
.composer-caption-controls label small {
  color:var(--muted);
  font-size:10px;
  font-weight:600;
}
.composer-caption-controls > .button {
  justify-self:stretch;
  width:100%;
  margin-top:0;
}
.composer-caption-status {
  min-height:18px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.composer-caption-result {
  grid-column:1 / -1;
  display:grid;
  gap:9px;
  margin-top:4px;
}
.composer-caption-result textarea {
  width:100%;
  min-height:130px;
  box-sizing:border-box;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--page);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  line-height:1.5;
  resize:vertical;
}
.composer-caption-result > div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.composer-caption-result small { color:var(--muted); font-size:10px; }
.composer-caption-result .button { margin:0; }
@media (max-width:900px) {
  .composer-caption-card { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .composer-caption-platform-options { grid-template-columns:1fr; }
}