@font-face { font-family:'Hanken Grotesk'; src:url('./hanken-grotesk-latin.woff2') format('woff2'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Della Respira'; src:url('./della-respira-latin.woff2') format('woff2'); font-weight:400; font-display:swap; }
.landing-page { --ink:#40263e; --heading:#392039; --muted:#634e63; --accent:#94436b; --edge:#96718b38; font-family:'Hanken Grotesk',Arial,sans-serif; }
.landing-page h1,.landing-page h2,.landing-page h3 { font-family:'Hanken Grotesk',Arial,sans-serif; font-weight:550; letter-spacing:-.05em; }
.landing-page em { font-family:'Della Respira',Georgia,serif; font-weight:500; font-style:normal; letter-spacing:-.045em; color:#88516f; }
.landing-page .wrap { width:min(1160px,calc(100% - 72px)); }
.landing-page .site-header { width:min(1120px,calc(100% - 48px)); margin-top:18px; padding:12px 24px; min-height:72px; border:1px solid #ffffffb8; border-radius:19px; background:#ffffff70; backdrop-filter:blur(22px); box-shadow:0 6px 30px #55384808; }
.landing-page .wordmark { font-family:'Hanken Grotesk',Arial,sans-serif; font-size:25px; letter-spacing:-.065em; }
.landing-page .site-header nav { font-size:12px; gap:24px; }
.landing-page .site-header nav>a:nth-child(3),.landing-page .site-header nav>a:nth-child(4) { display:none; }
.landing-page .login { border-color:#87688240; background:#fff9fc80; border-radius:12px; font-size:12px; padding:9px 15px; }
.landing-page .button { gap:20px; padding:14px 23px; min-height:50px; border:1px solid var(--ink); border-radius:12px; font-size:14px; background:var(--ink); color:#fffafb; box-shadow:0 4px 15px #3c283e18; }
.landing-page .button:hover { background:#744961; }
.landing-page .button svg,.inline-arrow { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; }
.landing-page .secondary-action { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:550; text-decoration:underline; text-underline-offset:5px; }
.glass-hero { display:block; text-align:center; padding-block:63px 28px; }
.hero-copy { max-width:890px; margin:auto; }
.product-kind,.section-label { font-size:11px; font-weight:550; letter-spacing:.035em; margin-bottom:20px; }
.landing-page h1 { font-size:clamp(42px,5.5vw,75px); line-height:1.12; margin-bottom:23px; }
.landing-page h1 em { font-size:1.14em; line-height:.95; }
.landing-page .hero-description { font-size:16px; max-width:570px; line-height:1.7; margin:0 auto 25px; }
.hero-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:24px; }
.access-note { margin:17px 0 0; font-size:11px; color:var(--muted); }
.creator-scene { position:relative; isolation:isolate; margin:58px auto 48px; padding-top:10px; max-width:1120px; }
.hero-workspace { position:relative; z-index:2; width:76%; margin:auto; border:1px solid #625869; border-radius:20px 20px 7px 7px; background:#28232e; box-shadow:0 30px 70px #62476335,0 2px 0 #ffffff50 inset; padding:24px 8px 7px; }
.hero-workspace::before { content:''; position:absolute; width:5px; height:5px; border-radius:50%; top:9px; left:calc(50% - 2px); background:#514359; box-shadow:0 0 0 2px #201c25; }
.hero-workspace::after { content:''; position:absolute; z-index:4; bottom:-13px; left:-5%; width:110%; height:14px; border-radius:2px 2px 45% 45%; background:linear-gradient(#e5dfe7,#bfb4c8 45%,#958b9e); border-bottom:2px solid #83758e; box-shadow:0 10px 18px #51345121; }
.workspace-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:8px 12px; min-height:32px; border-radius:6px 6px 0 0; background:#f1e8f1; color:#64536b; font-size:9px; }
.workspace-top>span { display:flex; align-items:center; gap:16px; }
.window-controls { display:inline-flex; gap:5px; align-items:center; flex-shrink:0; }
.window-controls i { display:block; width:7px; height:7px; border-radius:50%; background:#d898a0; }
.window-controls i:nth-child(2) { background:#dcbb77; }
.window-controls i:nth-child(3) { background:#9abd9e; }
.hero-screen { display:block; overflow:hidden; background:#211d26; }
.hero-screen img { display:block; width:100%; height:auto; }
.workspace-foot { display:flex; justify-content:space-between; gap:15px; padding:8px 4px 2px; font-size:9px; color:#ddd2df; }
.workspace-foot a { white-space:nowrap; color:#ddd2df; text-underline-offset:3px; }
.reference-sheet { position:absolute; z-index:1; top:58px; left:0; width:195px; padding:21px; text-align:left; border:1px solid #ffffffc9; border-radius:19px; background:#ddeee9e8; box-shadow:0 18px 45px #62476320; transform:rotate(-9deg); }
.reference-sheet>p { font-size:10px; margin-bottom:17px; }
.sheet-play { display:grid; place-items:center; width:55px; height:55px; margin:0 0 24px; border-radius:50%; background:#aecbba; color:#4a6c58; }
.sheet-play svg { width:30px; height:30px; fill:currentColor; }
.reference-sheet h3 { font-family:'Della Respira',Georgia,serif; font-size:29px; line-height:1.05; font-weight:500; margin-bottom:22px; }
.reference-sheet>span { font-size:9px; }
.script-sheet { position:absolute; z-index:3; top:82px; right:0; width:212px; text-align:left; padding:19px; border:1px solid #fff; border-radius:18px; background:#fff6e8eb; backdrop-filter:blur(20px); box-shadow:0 15px 40px #62476324; transform:rotate(7deg); }
.script-sheet-top { display:flex; align-items:center; gap:6px; font-size:10px; border-bottom:1px solid #b9916726; padding-bottom:16px; margin-bottom:17px; }
.script-sheet-top>span { margin-left:auto; font-size:9px; }
.script-sheet>p { font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.script-sheet>h3 { font-size:19px; line-height:1.4; font-weight:500; margin-bottom:22px; letter-spacing:-.03em; }
.script-lines { display:grid; gap:7px; margin-bottom:21px; }
.script-lines i { display:block; height:5px; border-radius:4px; background:#dbc5ae80; }
.script-lines i:last-child { width:65%; }
.script-ready { display:block; padding:9px; background:#f0d6b9; text-align:center; border-radius:7px; font-size:10px; }
.script-sheet>small { display:block; margin-top:13px; font-size:9px; color:var(--muted); }
.creator-note { position:absolute; z-index:4; display:flex; align-items:center; gap:12px; max-width:275px; min-height:72px; padding:14px 17px; border:1px solid #fff; background:#fffafbf0; border-radius:15px; box-shadow:0 12px 30px #58415618; text-align:left; text-decoration:none; }
.creator-note:hover { background:#fff; }
.creator-note strong,.creator-note small { display:block; }
.creator-note strong { font-size:12px; font-weight:600; margin-bottom:4px; }
.creator-note small { font-size:10px; line-height:1.45; color:var(--muted); }
.note-left { left:2px; bottom:95px; transform:rotate(-4deg); }
.note-right { right:-4px; bottom:28px; transform:rotate(4deg); }
.note-play { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; background:#e8d8f0; color:#7d5698; border-radius:8px; }
.note-play svg { width:20px; height:20px; fill:currentColor; }
.landing-page .platform-strip { padding-block:20px 24px; border-color:#96718b2c; font-size:11px; }
.landing-page .platform-strip p { font-size:11px; }
.landing-page .workflow { padding-block:75px 65px; }
.landing-page h2 { font-size:clamp(32px,3.5vw,48px); }
.landing-page .section-heading { grid-template-columns:1.25fr 1fr; gap:75px; margin-bottom:35px; }
.landing-page .section-heading p { font-size:15px; }
.workflow-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; border-top:1px solid #96718b30; padding-top:26px; }
.workflow-list article { padding:0 3px; }
.workflow-list .step-number { display:block; font-size:10px; letter-spacing:.05em; color:#854061; margin-bottom:23px; }
.workflow-list h3 { font-size:22px; line-height:1.3; margin-bottom:17px; }
.workflow-list p { color:var(--muted); font-size:13px; line-height:1.8; }
.workflow-list .detail { font-size:11px; margin:20px 0 0; padding-top:17px; border-top:1px solid #96718b30; }
.workspace-section { padding-block:20px 75px; }
.glass-pane { border:1px solid #ffffffc9; border-radius:24px; background:#fffaf9b5; backdrop-filter:blur(20px); box-shadow:0 15px 40px #62476312; }
.landing-page .product-preview { padding:10px; }
.landing-page .preview-top { padding:14px 16px 20px; }
.landing-page .preview-top>p { display:flex; align-items:center; gap:8px; font-size:16px; }
.landing-page .view-buttons { border:1px solid #96718b30; background:#fff9fc75; padding:3px; border-radius:12px; }
.landing-page .view-buttons button { font-size:12px; border-radius:8px; min-height:40px; padding:7px 15px; }
.landing-page .view-buttons button[aria-pressed=true] { border-color:#96527331; background:#ecd0de80; }
.landing-page .product-preview figure>a { border-radius:15px; overflow:hidden; background:#241323; }
.landing-page figcaption { padding:16px 16px 8px; border:0; font-size:11px; }
.walkthrough { padding:20px 24px; margin-top:20px; }
.walkthrough summary { cursor:pointer; font-size:14px; font-weight:600; padding-left:6px; }
.walkthrough summary span { font-size:11px; font-weight:400; margin-left:20px; color:var(--muted); }
.walkthrough video { display:block; width:100%; height:auto; border-radius:12px; margin-top:20px; background:#231021; }
.video-note { font-size:11px; color:var(--muted); margin:16px 0 0; }
.hook-lab { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:90px; padding-block:20px 80px; }
.lab-intro>p:not(.section-label) { color:var(--muted); font-size:15px; max-width:36ch; }
.landing-page .hook-flower { width:100px; margin:22px 0 0; }
.landing-page .flower-label { font-size:8px; }
.landing-page #flower-help { font-size:11px; text-align:left; margin-top:8px; }
.landing-page .hero-art { display:block; border-radius:24px; }
.landing-page .hook-picker { border:0; border-bottom:1px solid #96718b30; padding:14px 20px; }
.landing-page .hook-picker button { min-height:44px; padding-inline:16px; border-radius:10px; }
.landing-page .hook-picker button[aria-pressed=true] { background:#ecd3e18c; border-color:#9b628633; }
.landing-page .idea-note,.landing-page .script-note { padding:27px 31px; }
.landing-page .script-note { border:0; border-top:1px solid #96718b30; background:#ffffff59; }
.landing-page .idea-note p,.landing-page .script-note p { font-size:24px; font-weight:450; line-height:1.45; }
.landing-page .note-tag { font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.landing-page .note-foot,.landing-page .example { font-size:11px; }
.landing-page .claude-section { background:#fffaf975; border-color:#ffffffae; backdrop-filter:blur(20px); padding-block:65px; }
.landing-page .claude-layout { gap:85px; }
.landing-page .claude-details h3 { font-size:22px; }
.landing-page .claude-details p { font-size:14px; }
.landing-page .review-note { border-color:#96718b30; font-size:12px!important; }
.landing-page .pricing { padding-block:80px; gap:95px; align-items:center; }
.landing-page .pricing-plan { padding:34px; border-radius:24px; }
.plan-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:27px; }
.landing-page .plan-heading h3 { margin:0; font-size:19px; }
.landing-page .plan-price strong { font-family:'Della Respira',Georgia,serif; font-weight:500; font-size:75px; }
.landing-page .plan-billing { margin-top:11px; }
.landing-page .pricing-plan li { border-color:#96718b30; font-size:13px; }
.landing-page .pricing-plan li:before { content:''; display:inline-block; width:13px; height:13px; margin-right:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%2384385d' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.landing-page .plan-note { font-size:11px; }
.landing-page .button-light { background:#fffafc70; border-color:#96718b45; box-shadow:none; color:var(--ink); }
.landing-page .about { padding-block:15px 65px; gap:85px; }
.landing-page .about p { font-size:15px; }
.landing-page .reading { padding-block:10px 65px; }
.landing-page .reading-links { gap:35px; }
.landing-page .reading-links h3 { font-size:22px; }
.landing-page .reading-links p { font-size:14px; }
.landing-page .closing { padding-block:40px 60px; border-color:#96718b30; }
.landing-page .closing h2 { font-size:48px; }
.landing-page .closing>div { display:flex; flex-direction:column; align-items:center; gap:10px; }
.landing-page .site-footer { background:#fffafa82; backdrop-filter:blur(20px); border-color:#ffffffae; }
.landing-page .site-footer h2 { font-family:'Hanken Grotesk',Arial,sans-serif; font-weight:600; }
.landing-page .footer-signoff { border-color:#96718b30; }
.landing-page .bloom-motion-toggle { background:#fff9fce8; font-family:'Hanken Grotesk',Arial,sans-serif; border-color:#96718b45; }
@media(max-width:1000px) {
  .reference-sheet { width:160px; padding:18px; }
  .reference-sheet h3 { font-size:25px; }
  .script-sheet { width:178px; padding:16px; }
  .script-sheet>h3 { font-size:17px; }
  .creator-note { max-width:235px; padding:12px; }
  .creator-note strong { font-size:11px; }
  .creator-note small { font-size:9px; }
  .note-left { bottom:65px; }
  .note-right { bottom:20px; }
  .hook-lab,.landing-page .pricing,.landing-page .claude-layout,.landing-page .about { gap:45px; }
}
@media(max-width:800px) {
  .landing-page .wrap { width:calc(100% - 48px); }
  .landing-page .site-header { width:calc(100% - 32px); }
  .glass-hero { padding-block:48px 22px; }
  .creator-scene { margin-top:36px; margin-bottom:24px; }
  .reference-sheet { width:145px; left:-10px; }
  .script-sheet { display:none; }
  .hero-workspace { width:86%; }
  .creator-note { position:relative; inset:auto; transform:none; display:inline-flex; margin:35px 5px 0; min-height:65px; }
  .landing-page .section-heading { display:block; }
  .landing-page .section-heading>p { margin-top:20px; }
  .workflow-list { gap:22px; }
  .workflow-list h3 { font-size:19px; }
  .landing-page .workflow { padding-block:50px; }
  .hook-lab { grid-template-columns:1fr; gap:30px; padding-bottom:50px; }
  .landing-page .claude-layout,.landing-page .about { display:block; }
  .landing-page .pricing { grid-template-columns:1fr; gap:30px; padding-block:50px; }
  .walkthrough summary span { display:block; margin:6px 0 0 16px; }
}
@media(max-width:550px) {
  .landing-page .wrap { width:calc(100% - 40px); }
  .landing-page .site-header { padding:9px 16px; gap:0; }
  .landing-page .wordmark { font-size:23px; }
  .landing-page .site-header nav { gap:16px; margin-top:5px; justify-content:flex-start; font-size:12px; }
  .landing-page .site-header nav .login { margin-left:auto; padding-inline:11px; font-size:11px; }
  .landing-page h1 { font-size:clamp(32px,8.7vw,47px); line-height:1.17; }
  .landing-page h1 em { font-size:1.1em; }
  .landing-page h2 { font-size:33px; }
  .product-kind { margin-bottom:16px; font-size:11px; }
  .landing-page .hero-description { font-size:15px; }
  .hero-actions { gap:17px; }
  .hero-actions .button { padding-inline:17px; gap:12px; font-size:13px; }
  .landing-page .secondary-action { font-size:12px; }
  .creator-scene { margin-top:29px; padding-top:0; }
  .reference-sheet { display:none; }
  .hero-workspace { width:100%; padding:17px 5px 5px; border-radius:13px 13px 5px 5px; }
  .hero-workspace::before { top:6px; width:4px; height:4px; }
  .hero-workspace::after { left:-3%; width:106%; height:10px; bottom:-10px; }
  .workspace-top { padding:5px 7px; min-height:25px; font-size:7px; gap:6px; }
  .workspace-top>span { gap:8px; }
  .window-controls { gap:3px; }
  .window-controls i { width:5px; height:5px; }
  .workspace-top>img { width:13px; height:13px; }
  .workspace-foot { font-size:8px; gap:8px; }
  .creator-note { display:flex; max-width:none; margin:27px 0 0; padding:13px 16px; }
  .creator-note+.creator-note { margin-top:10px; }
  .creator-note strong { font-size:12px; }
  .creator-note small { font-size:10px; }
  .landing-page .platform-strip { display:block; text-align:center; font-size:10px; }
  .landing-page .platform-strip p { margin-top:7px; font-size:10px; }
  .workflow-list { grid-template-columns:1fr; padding-top:0; border:0; }
  .workflow-list article { padding-top:22px; border-top:1px solid #96718b30; }
  .workflow-list h3 { font-size:23px; }
  .workflow-list .step-number { margin-bottom:15px; }
  .workspace-section { padding-block:15px 45px; }
  .landing-page .preview-top { padding:10px 10px 15px; }
  .landing-page .preview-top>p { margin-bottom:14px; }
  .landing-page .view-buttons { justify-content:space-between; }
  .landing-page .view-buttons button { font-size:11px; flex:1; padding-inline:8px; }
  .landing-page .product-preview figure>a { border-radius:10px; }
  .landing-page figcaption { padding:14px 10px 6px; }
  .walkthrough { padding:18px; }
  .walkthrough summary { font-size:13px; }
  .landing-page .idea-note,.landing-page .script-note { padding:25px; }
  .landing-page .idea-note p,.landing-page .script-note p { font-size:22px; }
  .landing-page .hook-picker { padding:12px; }
  .landing-page .hook-picker button { flex:1; font-size:12px; padding-inline:8px; }
  .landing-page .pricing-plan { padding:26px; }
  .landing-page .about,.landing-page .reading { padding-block:5px 50px; }
  .landing-page .reading-links { gap:22px; }
  .landing-page .closing { display:block; }
  .landing-page .closing h2 { font-size:40px; }
  .landing-page .closing>div { align-items:flex-start; margin-top:25px; }
  .landing-page .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-page .footer-inner nav { min-width:0; }
  .landing-page .footer-inner nav a { overflow-wrap:anywhere; }
}

/* Soft display forms, with a practical workspace typeface. */
.landing-page h1,.landing-page h2{font-family:"Della Respira",Georgia,serif;font-weight:400;letter-spacing:-.04em;line-height:1.12}
.landing-page h1 em{font-family:inherit;font-size:1em;font-weight:400;letter-spacing:inherit}