/* Editorial compositions made from genuine UI cutouts. Coordinates use a 100 × 100 canvas. */
.product-demo { --demo-ratio: 8 / 7; position: relative; width: 100%; min-width: 0; margin: 0; background: #fff; color: #2d2d2d; }
.product-demo__viewport { position: relative; aspect-ratio: var(--demo-ratio); overflow: hidden; }
.product-demo__viewport > img, .product-demo__viewport > video { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.demo-collage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 8 / 7; background: #fff; overflow: hidden; container-type: inline-size; }
#top .demo-collage .demo-cutout { position: absolute; z-index: 1; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: auto; max-width: none; max-height: none; object-fit: contain; border: .5px solid #2d2d2d24; border-radius: 5px; box-shadow: none; }
#top .demo-collage .demo-cutout--card { box-shadow: 3px 3px 0 #2d2d2d24; }
#top .demo-collage .demo-cutout--tip { border-radius: 4px; }
.demo-paper { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); background: var(--paper); border: .5px solid #2d2d2d24; transform: rotate(var(--turn)); border-radius: 3px; }
.demo-handnote { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); font-family: var(--font-handnote, Caveat, cursive); font-size: clamp(16px, 6cqi, 28px); font-weight: 500; line-height: 1.1; white-space: nowrap; transform: rotate(var(--turn)); }
.product-demo__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.product-demo--hero { --demo-ratio: 8 / 5; }
.product-demo:has(video):not(.product-demo--hero) { --demo-ratio: 8 / 7; }
#top .familiar-visual--big:has(.product-demo) { display: block; width: 100%; height: auto; padding: 0; margin: 0; border: 0; background: #fff; transform: none; }
#top .familiar-visual--big .familiar-visual-note { display: none; }
#top .familiar-chips, #top .familiar-pair { grid-template-columns: minmax(0,.7fr) 30px minmax(0,1.3fr); }
#top .familiar-card--solution { padding: 20px 20px 16px 24px; border-width: .75px; }
#top .familiar-card--solution .familiar-card__body { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px; }
#top .feat3-goals-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
#top .feat3-goals-block, #top .feat3-goals-visual:has(.product-demo) { height: 100%; }
#top .feat3-goals-visual:has(.product-demo), #top .feat3-frag:has(.product-demo), #top .ai-screen-card:has(.product-demo) { display: flex; flex-direction: column; border: 1px solid var(--divider, #2d2d2d1a); border-radius: var(--landing-card-radius, 16px); overflow: hidden; padding: 20px 0 0; background: #fff; min-width: 0; }
#top .feat3-goals-visual-text, #top .feat3-frag > p, #top .ai-screen-card > h3, #top .ai-screen-card > small { margin-inline: 12px; }
#top .feat3-goals-visual-text { min-height: 76px; }
#top .feat3-frag .feat3-frag-sub { min-height: 40px; }
#top .feat3-goals-visual .product-demo, #top .feat3-frag .product-demo, #top .ai-screen-card .product-demo { margin-top: auto; }
#top .feat3-decomp-row, #top .feat3-retro-row, #top .ai-screen-row { align-items: stretch; }
#top .ai-screen-card small { margin-bottom: 20px; }
#top .feat3-retro-row .demo-collage, #top .feat3-goals-body .demo-collage { max-width: 480px; margin: auto; }
@media (max-width: 1100px) and (min-width: 981px) {
 #top .familiar-card--solution .familiar-card__body { grid-template-columns: 1fr; }
 #top .familiar-visual--big { max-width: 440px; }
}
@media (max-width: 980px) {
 #top .familiar-pair { grid-template-columns: 1fr; }
 #top .familiar-chips { display: none; }
 #top .familiar-card--solution .familiar-card__body { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
}
@media (max-width: 900px) {
 #top .feat3-decomp-row { grid-template-columns: 1fr; }
 #top .feat3-decomp-row .product-demo { max-width: 480px; align-self: center; }
}
@media (max-width: 780px) { #top .feat3-goals-body { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
 .product-demo--hero { --demo-ratio: 4 / 5; }
 #top .familiar-card--solution { padding: 20px 12px 12px; }
 #top .familiar-card--solution .familiar-card__body { grid-template-columns: 1fr; gap: 24px; }
 #top .familiar-card--solution .familiar-copy { padding-inline: 8px; }
 #top .familiar-visual--big { max-width: 440px; }
 #top .feat3-goals-visual-text, #top .feat3-frag .feat3-frag-sub { min-height: 0; }
 #top .feat3-frag .product-demo, #top .feat3-goals-visual .product-demo, #top .ai-screen-card .product-demo { margin-top: 12px; }
}

/* A single continuous goal demonstration replaces the two static cards. */
#top .feat3-goals-flow { padding: 24px; border: 1px solid var(--border-default, #2d2d2d2e); border-radius: 16px; background: #fff; box-shadow: 3px 3px 0 #2d2d2d24; }
.feat3-goals-flow__intro { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.feat3-goals-flow__intro h4 { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
.feat3-goals-flow__intro p { max-width: 590px; margin: 0; color: #65655f; font-size: 16px; line-height: 24px; }
.feat3-goals-flow__note { max-width: 220px; font: 24px/1.1 var(--font-handnote); transform: rotate(-4deg); }
#top .product-demo--goals { --demo-ratio: 14 / 9; max-width: 760px; margin: 24px auto 0; }
@media(max-width:640px) {
 #top .feat3-goals-flow { padding: 20px 8px 8px; }
 .feat3-goals-flow__intro { padding: 0 12px; }
 .feat3-goals-flow__intro h4 { font-size: 20px; }
 .feat3-goals-flow__note { display: none; }
 #top .product-demo--goals { --demo-ratio: 4 / 5; }
}

/* Desktop keeps the complete window; mobile uses the existing focused 4:5 workflow. */
#top > .hero .screen-wrap { max-width: 1280px; }
#top > .hero .screen-shell { padding: 0; border: 1px solid var(--border-default, #2d2d2d2e); background: var(--white); transform: none; overflow: hidden; }

#top > .hero .screen-topbar { height: 40px; padding: 0 16px; border-bottom: 1px solid var(--ink-10); background: var(--white); }
#top > .hero .screen-topbar::after { display: none; }

/* Keep the product demonstration legible without adding decorative containers. */
#top .feat3-goals-flow { padding: 0; border: 0; box-shadow: none; }
#top > .hero .screen-wrap { max-width: 1120px; }
#top > .hero .screen-shell { border: 0; box-shadow: var(--landing-accent-shadow); }
#top .hero-feature-grid { color: var(--gray-700); }
#top :is(.feat3-frag, .ai-screen-card) > :is(h3, p, small) { margin-inline: 20px; }
@media (max-width: 640px) {
 #top .feat3-goals-flow { padding: 0; }
 #top > .hero .screen-wrap { max-width: 440px; }
 #top > .hero .screen-topbar { height: 32px; }
}

/* Card copy and proof share a clear edge; media keeps its complete aspect ratio. */
#top .landing-unified :is(.feat3-frag,.ai-screen-card) { padding: 20px 0 0; border: var(--landing-group-border); }
#top .landing-unified :is(.feat3-frag,.ai-screen-card) > .product-demo { padding: 0 12px; }
#top .landing-unified :is(.feat3-frag,.ai-screen-card) .product-demo__viewport { max-width: 420px; margin-inline: auto; }
#top .feat3-goals-flow__intro p { color: var(--gray-700); }
@media(max-width:640px) {
 #top .landing-unified :is(.feat3-frag,.ai-screen-card) > .product-demo { padding: 0; }
 #top .feat3-retro-row, #top .ai-screen-row { align-items: start; }
 #top .feat3-goals-flow__intro { padding-inline: 8px; }
}

/* Inner media mirrors borderless white task cards on flat application columns. */
#top .landing-unified :is(.feat3-frag,.ai-screen-card) { border: 0; border-radius: 12px; background: var(--white); box-shadow: var(--landing-card-shadow); }
#top .landing-unified .feat3-decomp-row .product-demo { margin-top: 16px; }
#top .landing-unified :is(.feat3-frag,.ai-screen-card) .product-demo__viewport { border-radius: 12px; }
#top .landing-unified :is(.feat3-frag,.ai-screen-card) > .product-demo { padding-bottom: 12px; }
#top #retro .feat3-frag { box-shadow: var(--landing-card-shadow); }

/* Composition: read the problem and outcome together, then inspect their proof. */
#top .familiar-chips { display: none; }
#top .familiar-list { gap: 32px; }
#top .familiar-pair { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 32px; padding: 28px; align-items: center; }
#top .familiar-narrative { min-width: 0; }
#top .familiar-card { height: auto; }
#top .familiar-card--problem { padding: 24px; justify-content: flex-start; border-radius: 12px; }
#top .familiar-state-label { display: block; margin-bottom: 12px; color: var(--gray-700); font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
#top .familiar-card--solution .familiar-state-label { color: #38521C; }
#top .familiar-card--problem .familiar-copy h3 { max-width: none; }
#top .familiar-card-note { align-self: flex-end; margin: 16px 0 0; color: var(--ink); font: 500 20px/24px var(--font-handnote); text-align: right; transform: rotate(-2deg); }
#top .familiar-footnote a { color: var(--gray-700); }
#top .familiar-link { height: 32px; justify-content: flex-start; margin-left: 24px; }
#top .familiar-link span { border: 0; background: transparent; }
#top .familiar-link span::after { transform: rotate(90deg); font-size: 20px; line-height: 24px; }
#top .familiar-card--solution { padding: 8px 24px 12px; overflow: visible; }
#top .familiar-card--solution .familiar-card__body { display: block; height: auto; }
#top .familiar-solution-list { margin-top: 16px; }
#top .familiar-solution-list li { color: var(--gray-700); }
#top .familiar-evidence { min-width: 0; padding: 20px; border-radius: 16px; background: var(--app-canvas); }
#top .familiar-evidence .familiar-visual--big { max-width: none; border-radius: 12px; overflow: hidden; }
#top .familiar-evidence .product-demo__viewport:has(> img) { aspect-ratio: 4 / 3; }
#top .familiar-evidence .demo-paper { display: none; }
#top .familiar-evidence-note { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 12px 4px 0; color: var(--ink); font: 500 24px/28px var(--font-handnote); }
#top .familiar-evidence-note svg, #top .who-group-note svg { flex: none; width: 48px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#top .familiar-evidence .demo-collage--capacity { aspect-ratio: 8 / 6; }
#top .familiar-evidence .demo-collage--goal { aspect-ratio: 8 / 6; }
#top .familiar-evidence .product-demo__viewport:has(.demo-collage--capacity),
#top .familiar-evidence .product-demo__viewport:has(.demo-collage--goal) { aspect-ratio: 8 / 6; }
#top .familiar-evidence .demo-collage--goal .demo-cutout--tip { top: 66%; }

/* An annotation belongs to its group, not to an empty strip above it. */
#top .who-group-note { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px auto 28px; color: var(--ink); }
#top .who-group-note .who-frame-legend { max-width: none; margin: 0; font: 500 24px/28px var(--font-handnote); }
#top .who-final { margin-top: 0; background: var(--app-canvas); box-shadow: none; }
#top > .hero .hero-feature-grid { max-width: 1120px; gap: 24px; }
#top .hero-feature { align-items: center; }
#top .hero-form-cta svg { transform: translateY(8px); }

/* Explain beside the goal demonstration; keep complete native video frames. */
#top .feat3-goals-flow { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 32px; align-items: center; }
#top .feat3-goals-flow__intro { display: block; }
#top .feat3-goals-flow__intro p { max-width: 36ch; }
#top .feat3-goals-flow__note { display: block; max-width: none; margin-top: 28px; font: 500 24px/28px var(--font-handnote); transform: rotate(-2deg); }
#top .product-demo--goals { margin: 0; max-width: none; border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
#top .more-frame-note { font: 400 14px/20px var(--font-sans); color: var(--gray-700); }
#top .landing-unified .ai-screen-card { align-self: start; }
#top .landing-unified .ai-screen-card > .product-demo { margin-top: 12px; padding-inline: 16px; }
#top .landing-unified .ai-screen-card .product-demo__viewport { max-width: none; }
#top .landing-unified .ai-screen-card .ai-summary-overview { aspect-ratio: 3 / 2; }
.ai-summary-details { display: none; }
#top .landing-unified .ai-screen-row { align-items: start; }
#top .landing-unified .ai-content-panel .ai-reference-outcome { align-items: start; }
#top .ai-reference-outcome .ai-outcome-icon { margin-top: 4px; transform: none; }

#top #price .price-card.featured .price-cta { border-color: var(--gray-700); color: var(--ink); }
#top #signup .cta-input { text-align: left; }
#top > #integrations .integrations-doodle { top: 92px; }
#top > #integrations .integrations-doodle svg { height: 112px; }

@media (max-width: 980px) {
 #top .familiar-pair { grid-template-columns: 1fr; gap: 24px; max-width: 760px; margin-inline: auto; }
 #top .familiar-evidence { width: 100%; max-width: 600px; justify-self: center; }
 #top .feat3-goals-flow { grid-template-columns: 1fr; gap: 24px; }
 #top .feat3-goals-flow__intro p { max-width: none; }
 #top .feat3-goals-flow__note { margin-top: 16px; }
 #top .product-demo--goals { max-width: 680px; margin-inline: auto; }
}
@media (max-width: 640px) {
 #top .familiar-pair { padding: 12px; gap: 20px; }
 #top .familiar-card--problem { padding: 20px; }
 #top .familiar-card--solution { padding: 8px 8px 0; }
 #top .familiar-card--solution .familiar-copy { padding: 0; }
 #top .familiar-link { margin-left: 20px; height: 28px; }
 #top .familiar-evidence { padding: 12px; }
 #top .familiar-evidence-note { font-size: 20px; line-height: 24px; }
 #top .familiar-evidence-note svg { width: 36px; }
 #top .who-card-icon { width: 44px; height: 44px; flex: 0 0 44px; }
 #top .who-card-head { gap: 12px; }
 #top .who-group-note { justify-content: flex-start; align-items: flex-start; gap: 8px; margin: 20px 12px 28px; }
 #top .who-group-note .who-frame-legend { max-width: 240px; font-size: 20px; line-height: 24px; }
 #top .who-group-note svg { width: 32px; height: 24px; }
 #top .feat3-goals-flow__intro { padding-inline: 8px; }
 #top .feat3-goals-flow__note { display: none; }
 #top .more-frame-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
 #top .more-tool { min-height: 40px; }
 #top .landing-unified .ai-screen-card > .product-demo { padding: 0 12px 16px; }
 #top .landing-unified .ai-screen-card .ai-summary-overview { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .ai-summary-details { display: grid; gap: 16px; }
 .ai-summary-detail { position: relative; overflow: hidden; border-radius: 8px; }
 .ai-summary-detail img { position: absolute; max-width: none; height: auto; }
 .ai-summary-detail--settings { aspect-ratio: 664 / 410; }
 .ai-summary-detail--settings img { width: 231.325%; left: -4.52%; top: -18.3%; }
 .ai-summary-detail--report { aspect-ratio: 754 / 286; }
 .ai-summary-detail--report img { width: 203.714%; left: -99.735%; top: -48.95%; }
 .ai-summary-detail--results { aspect-ratio: 1072 / 476; }
 .ai-summary-detail--results img { width: 143.284%; left: -22.388%; top: -105.04%; }
 #top .ai-reference-outcome { grid-template-columns: 24px minmax(0,1fr); gap: 12px; }
 #top .ai-outcome-icon { width: 24px; height: 24px; background: transparent; }
 #top > #integrations .integrations-doodle { position: relative; top: auto; flex-direction: row; align-items: flex-start; margin: 20px 12px -12px auto; transform: none; }
 #top > #integrations .integrations-doodle svg { width: 40px; height: 64px; transform: rotate(-35deg); transform-origin: center; }
 
 
 #top .landing-unified .price { min-height: 0; padding-block: 20px; }
 #top .landing-unified .price-card-head { margin-bottom: 20px; }
 footer .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 20px; }
 footer .footer-brand, footer .footer-nav:last-of-type { grid-column: 1 / -1; }
}

/* Annotation endpoints are anchored to the content they explain. */
#top .familiar-evidence:has(.demo-collage--horizons) { display: flex; flex-direction: column; }
#top .familiar-evidence:has(.demo-collage--horizons) .familiar-evidence-note { order: -1; margin: 0 4px 12px; }
#top .familiar-evidence:has(.demo-collage--horizons) .familiar-evidence-note svg { transform: scaleY(-1); }
#top #ai .title em::before { background: var(--app-lime); }
#top .integrations-available-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 16px; }
#top .integrations-available-head h3 { margin: 0; }
#top > #integrations .integrations-available-head .integrations-doodle { display: flex; position: static; align-items: center; gap: 12px; width: auto; margin: 0 12px 0 0; transform: none; text-align: left; }
#top > #integrations .integrations-available-head .integrations-doodle span { font-size: 20px; line-height: 24px; }
#top > #integrations .integrations-available-head .integrations-doodle svg { width: 48px; height: 56px; margin: 0; transform: translateY(16px); }
@media (min-width: 901px) {
 #top .landing-unified .ai-screen-row { align-items: stretch; }
 #top .landing-unified .ai-screen-card { align-self: stretch; }
 #top .landing-unified .ai-screen-card--alt > .product-demo { margin-block: auto; }
}
@media (max-width: 640px) {
 #top .integrations-available-head { gap: 12px; }
 #top > #integrations .integrations-available-head .integrations-doodle { gap: 4px; margin-right: 0; }
 #top > #integrations .integrations-available-head .integrations-doodle svg { width: 36px; height: 48px; }
}

/* Demo videos open in a larger window. */
#top > .hero .screen-wrap,
#top #capabilities .cap2-goal-shell { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.demo-expand-hint { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgba(45,45,45,.82); color: #fff; pointer-events: none; }
.demo-expand-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.demo-lightbox-open { overflow: hidden; }
.demo-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 32px; background: rgba(24,24,22,.92); }
.demo-lightbox__stage { display: grid; place-items: center; width: min(1440px, 100%); height: 100%; }
.demo-lightbox__stage video { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; background: #fff; }
.demo-lightbox__close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #2d2d2d; cursor: pointer; }
.demo-lightbox__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 640px) and (orientation: portrait) {
 .demo-lightbox { padding: 0; background: #000; }
 .demo-lightbox__stage { position: absolute; top: 50%; left: 50%; width: 100dvh; height: 100dvw; transform: translate(-50%,-50%) rotate(90deg); }
 .demo-lightbox__stage video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; }
}