/* Product storytelling builds on the published support site's light/dark tokens. */
body.product-page { --showcase:#e8edf3; --showcase-top:#f5f7fa; --sample:#f3f1ec; --sample-ink:#3c3c36; --product-shadow:0 32px 85px #26364912; }
.product-width { width:calc(100% - 48px); max-width:1184px; margin-left:auto; margin-right:auto; }
.product-kicker { font-size:13px; letter-spacing:.035em; color:var(--muted); font-weight:600; margin:0 0 22px; }
.product-kicker>span { padding:0 8px; color:var(--field-line); }
.product-intro { padding:70px 28px 48px; display:grid; grid-template-columns:1.3fr 1fr; align-items:end; gap:44px; }
body.product-page .product-intro h1 { font-size:clamp(44px,5.3vw,76px); line-height:1.18; letter-spacing:-.045em; margin:0; font-weight:650; }
.intro-copy { padding-bottom:5px; }
.intro-copy>p { color:var(--muted); font-size:19px; line-height:1.85; margin:0 0 26px; }
.product-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.product-actions .primary { font-size:15px; }
.text-action { font-size:15px; line-height:1.6; font-weight:550; }
.text-action span,.primary span { margin-left:8px; }
.workspace-showcase { background:linear-gradient(145deg,var(--showcase-top),var(--showcase)); border:1px solid var(--line); border-radius:36px; padding:16px; box-shadow:var(--product-shadow); scroll-margin-top:110px; }
.showcase-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 10px 16px; }
.preview-tabs { display:flex; padding:4px; gap:3px; border-radius:999px; background:color-mix(in srgb,var(--surface) 72%,transparent); border:1px solid var(--line); }
.preview-tabs button { background:transparent; border:0; border-radius:999px; color:var(--muted); font-size:14px; font-weight:550; padding:11px 21px; min-height:42px; white-space:nowrap; }
.preview-tabs button:hover { color:var(--ink); }
.preview-tabs button[aria-selected=true] { color:var(--surface); background:var(--ink); box-shadow:0 2px 6px #0000000d; }
.expand-preview,.close-preview { color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:10px 17px; font-size:13px; min-height:44px; white-space:nowrap; }
.expand-preview:hover,.close-preview:hover { background:var(--subtle); }
.preview-panel { background:#f3f3f4; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:22px; aspect-ratio:2560/1480; overflow:hidden; box-shadow:0 18px 45px #151b2912; }
.preview-panel img { width:100%; height:100%; object-fit:contain; }
.showcase-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:13px; color:var(--muted); padding:18px 14px 2px; }
.preview-index { color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.preview-index>span { color:var(--muted); margin-left:7px; }
.product-specs { display:flex; justify-content:center; gap:42px; padding:32px 0; color:var(--muted); font-size:13px; }
.product-specs span+span { position:relative; }
.product-specs span+span:before { content:""; position:absolute; left:-22px; top:7px; width:1px; height:12px; background:var(--line); }
.product-features { padding-top:66px; }
.product-section-title { padding:0 28px 38px; }
body.product-page h2 { font-size:clamp(32px,3.5vw,48px); line-height:1.3; letter-spacing:-.035em; margin:0 0 23px; }
body.product-page h2[id] { scroll-margin-top:115px; }
.product-section-title>p:last-child { color:var(--muted); font-size:18px; margin-bottom:0; }
.creation-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; }
.creation-card { border:1px solid var(--line); border-radius:36px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; min-width:0; }
.feature-copy { padding:38px 38px 28px; }
.feature-label { font-size:13px; color:var(--muted); display:block; margin-bottom:18px; }
body.product-page .feature-copy h3 { font-size:32px; line-height:1.4; letter-spacing:-.025em; margin:0 0 18px; font-weight:600; }
.feature-copy p { color:var(--muted); font-size:16px; line-height:1.85; margin:0; }
.artwork { margin:auto 20px 20px; border-radius:24px; overflow:hidden; background:var(--surface-soft); }
.artwork img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.artwork figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:15px 20px; font-size:12px; color:var(--muted); }
.artwork figcaption span:first-child { color:var(--ink); }
.writing-sample { margin:auto 20px 20px; padding:27px 30px; border:1px solid color-mix(in srgb,var(--sample-ink) 8%,transparent); background:var(--sample); color:var(--sample-ink); border-radius:24px; }
.sample-label,.sample-source { font-size:12px; color:var(--muted); }
.sample-label { margin:0 0 26px; }
.sample-title { font-size:29px; letter-spacing:.12em; margin:0 0 10px; font-weight:600; }
.sample-copy { font-size:17px; line-height:1.85; margin:0 0 25px; }
.model-section { padding:92px 28px 86px; }
.model-heading { display:grid; grid-template-columns:1.15fr 1fr; gap:72px; align-items:end; }
.model-heading h2 { margin-bottom:0; }
.model-heading>p { color:var(--muted); font-size:18px; line-height:1.9; max-width:420px; margin-bottom:4px; }
.model-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin:46px 0 30px; }
.model-steps>div { border-top:1px solid var(--line); padding-top:25px; }
.step-number { color:var(--blue); font-size:13px; font-variant-numeric:tabular-nums; }
.model-steps h3 { font-size:20px; margin:18px 0 10px; font-weight:600; }
.model-steps p { font-size:15px; color:var(--muted); margin:0; }
.continuity-section { display:grid; grid-template-columns:1.05fr 1fr; gap:30px 60px; background:var(--surface); border:1px solid var(--line); border-radius:38px; padding:52px; }
.continuity-copy>p:not(.product-kicker) { font-size:17px; color:var(--muted); margin-bottom:24px; }
.connection-visual { display:flex; align-items:center; justify-content:center; gap:16px; }
.connection-product { display:flex; flex-direction:column; align-items:center; gap:5px; }
.brand-platform { width:145px; height:145px; display:grid; place-items:center; border:1px solid var(--line); border-radius:34px; background:var(--surface-soft); margin-bottom:14px; box-shadow:0 16px 26px #00000004; }
.brand-platform img { width:100px; height:100px; object-fit:contain; }
.connection-product strong { font-size:16px; font-weight:600; white-space:nowrap; }
.connection-product>span { color:var(--muted); font-size:12px; }
.connection-line { display:flex; gap:8px; margin-bottom:51px; }
.connection-line span { width:5px; height:5px; border-radius:50%; background:var(--field-line); }
.connection-line span:nth-child(2) { background:var(--blue); }
.connection-note { border-top:1px solid var(--line); padding-top:22px; grid-column:1/-1; font-size:13px; color:var(--muted); margin:0; }
.ownership-section { display:grid; grid-template-columns:1fr 1.05fr; gap:85px; padding:90px 28px; }
.ownership-points>div { padding:0 0 23px; margin:0 0 23px; border-bottom:1px solid var(--line); }
.ownership-points h3 { margin:0 0 8px; font-size:20px; font-weight:600; }
.ownership-points p { color:var(--muted); font-size:16px; margin:0; }
.getting-started { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:50px 52px; background:var(--surface); border:1px solid var(--line); border-radius:36px; }
.getting-started h2 { font-size:38px!important; margin-bottom:16px!important; }
.getting-started p:not(.product-kicker) { color:var(--muted); font-size:16px; margin-bottom:0; }
.getting-started-action { display:flex; align-items:center; flex-direction:column; gap:20px; flex-shrink:0; }
.getting-started-action .primary { font-size:15px; }
.purchase-note { padding:0 28px; margin-top:32px; margin-bottom:64px; color:var(--muted); }
.purchase-note summary { display:flex; align-items:center; justify-content:space-between; list-style:none; font-size:13px; padding:14px 0; cursor:pointer; }
.purchase-note summary::-webkit-details-marker { display:none; }
.purchase-note summary>span { font-size:20px; transition:transform .2s; }
.purchase-note[open] summary>span { transform:rotate(45deg); }
.purchase-content { font-size:13px; max-width:960px; padding-top:15px; }
.preview-dialog { width:min(1360px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:18px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:28px; box-shadow:0 36px 100px #0005; }
.preview-dialog::backdrop { background:#070b14aa; backdrop-filter:blur(9px); }
.dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 0 14px; }
body.product-page .dialog-toolbar h2 { font-size:17px; margin:0; }
.preview-dialog>img { width:100%; height:auto; max-height:calc(100dvh - 170px); object-fit:contain; background:#f3f3f4; border-radius:15px; }
.preview-dialog>p { font-size:12px; color:var(--muted); margin:12px 0 0; }
@media(prefers-color-scheme:dark) {
  body.product-page { --showcase:#252b35; --showcase-top:#1c2027; --sample:#222420; --sample-ink:#e4e5da; --product-shadow:0 32px 85px #0004; }
  .preview-panel { box-shadow:0 18px 45px #0003; }
  .preview-tabs { background:#15181ee6; }
  .brand-platform { box-shadow:none; }
}
@media(max-width:1000px) {
  .product-intro { gap:25px; padding:52px 20px 38px; }
  body.product-page .product-intro h1 { font-size:56px; }
  .intro-copy>p { font-size:17px; }
  .wide-only { display:none; }
  .feature-copy { padding:30px; }
  body.product-page .feature-copy h3 { font-size:28px; }
  .continuity-section { padding:38px; gap:35px; }
  .brand-platform { width:116px; height:116px; border-radius:28px; }
  .brand-platform img { width:85px; height:85px; }
  .model-heading { gap:40px; }
  .model-steps { gap:25px; }
  .ownership-section { gap:50px; }
  .getting-started { padding:38px; }
}
@media(max-width:760px) {
  .product-width { width:calc(100% - 24px); }
  .product-intro { display:block; padding:35px 15px 30px; }
  .product-kicker { font-size:11px; margin-bottom:18px; }
  body.product-page .product-intro h1 { font-size:clamp(38px,10.8vw,64px); line-height:1.22; }
  .intro-copy { padding:0; margin-top:23px; }
  .intro-copy>p { font-size:16px; line-height:1.8; margin-bottom:22px; }
  .product-actions { gap:24px; }
  .product-actions .primary { padding:13px 20px!important; }
  .workspace-showcase { border-radius:25px; padding:10px; scroll-margin-top:130px; }
  .showcase-toolbar { padding:0 0 10px; gap:10px; flex-wrap:wrap; }
  .preview-tabs { width:100%; justify-content:space-between; gap:0; border-radius:18px; }
  .preview-tabs button { padding:9px 10px; font-size:12px; min-height:40px; border-radius:14px; }
  .expand-preview { margin-left:auto; padding:4px 12px; min-height:34px; font-size:11px; }
  .preview-panel { border-radius:14px; }
  .showcase-caption { padding:13px 5px 4px; font-size:12px; gap:15px; }
  .preview-index { display:none; }
  .product-specs { flex-wrap:wrap; gap:8px 22px; padding:22px 14px 0; justify-content:flex-start; font-size:11px; }
  .product-specs span+span:before { display:none; }
  .product-features { padding-top:56px; }
  .product-section-title { padding:0 15px 26px; }
  body.product-page h2 { font-size:33px; line-height:1.35; margin-bottom:18px; }
  body.product-page h2[id] { scroll-margin-top:145px; }
  .product-section-title>p:last-child { font-size:16px; }
  .creation-grid { grid-template-columns:1fr; gap:18px; }
  .creation-card { border-radius:28px; }
  .feature-copy { padding:29px 25px 24px; }
  body.product-page .feature-copy h3 { font-size:28px; }
  .feature-copy p { font-size:15px; }
  .artwork { margin:0 12px 12px; border-radius:21px; }
  .artwork figcaption { font-size:11px; padding:13px 15px; }
  .writing-sample { margin:0 12px 12px; padding:26px; border-radius:21px; }
  .sample-copy { font-size:16px; }
  .model-section { padding:58px 15px; }
  .model-heading { display:block; }
  .model-heading>p { font-size:16px; margin-top:22px; }
  .model-steps { grid-template-columns:1fr; gap:25px; margin:30px 0 25px; }
  .model-steps>div { padding-top:21px; }
  .model-steps h3 { margin-top:10px; }
  .continuity-section { padding:30px 25px; border-radius:28px; grid-template-columns:1fr; gap:30px; }
  .continuity-copy>p:not(.product-kicker) { font-size:16px; }
  .connection-visual { gap:12px; }
  .brand-platform { width:105px; height:105px; border-radius:27px; }
  .brand-platform img { width:75px; height:75px; }
  .connection-product strong { font-size:14px; }
  .connection-product>span { font-size:11px; }
  .connection-line { gap:6px; }
  .connection-line span { width:4px; height:4px; }
  .connection-note { font-size:12px; }
  .ownership-section { grid-template-columns:1fr; padding:58px 15px; gap:15px; }
  .getting-started { display:block; padding:30px 25px; border-radius:28px; }
  .getting-started h2 { font-size:30px!important; }
  .getting-started-action { align-items:flex-start; margin-top:25px; gap:19px; }
  .purchase-note { padding:0 15px; margin-top:24px; margin-bottom:40px; }
  .preview-dialog { padding:12px; border-radius:20px; }
  body.product-page .dialog-toolbar h2 { font-size:13px; }
  .dialog-toolbar { gap:12px; }
  .close-preview { font-size:12px; padding:8px 12px; }
}
@media(max-width:350px) {
  .preview-tabs button { padding:9px 7px; font-size:11px; }
  .connection-visual { gap:7px; }
  .brand-platform { width:90px; height:90px; border-radius:24px; }
  .connection-line { gap:4px; }
}
@media(prefers-reduced-motion:reduce) { .purchase-note summary>span { transition:none; } }
@media print { .showcase-toolbar,.purchase-note,.preview-dialog,.getting-started-action { display:none; } .product-width { width:100%; } }
