@import url("./radii.css");
@import url("./neutrals.css");
input::placeholder,textarea::placeholder{color:var(--text-secondary-light);opacity:1}
input:disabled,textarea:disabled{-webkit-text-fill-color:currentColor}

    @font-face{font-family:Inter;src:url('../fonts/inter-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:Inter;src:url('../fonts/inter-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
    @font-face{font-family:Inter;src:url('../fonts/inter-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
    @font-face{font-family:Garet;src:url('../fonts/garet-regular.ttf') format('truetype');font-weight:400;font-display:swap}
    @font-face{font-family:Garet;src:url('../fonts/garet-medium.ttf') format('truetype');font-weight:500;font-display:swap}
    @font-face{font-family:Garet;src:url('../fonts/garet-bold.ttf') format('truetype');font-weight:700;font-display:swap}
    :root{--paper:#ffffff;--ink:var(--neutral-950);--muted: var(--text-secondary-light);--line:var(--neutral-200);--lilac:#c9baff;--lime:#dfef9a;--dark:var(--neutral-925);--gutter:clamp(24px,5.5vw,88px);--ease:cubic-bezier(.22,1,.36,1)}
    *,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}button{border:0}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500}::selection{background:var(--lilac);color:var(--neutral-950)}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:6px}button:disabled{cursor:default;opacity: 1}.shell{max-width:1600px;padding-inline:var(--gutter);margin-inline:auto}.section{padding-block:110px}.eyebrow{font:11px/1.5 Garet,sans-serif;letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:11px}.section-label{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--line);margin-bottom:57px;font-size:11px;letter-spacing:.09em;text-transform:uppercase}.section-label>span:last-child{opacity:.55}.display{font-size:clamp(40px,5.1vw,76px);line-height:1.07;letter-spacing:-.065em}.sub{font-size:15px;line-height:1.8;color:var(--muted);max-width:420px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:27px;min-height:52px;padding:15px 23px;border:1px solid var(--ink);border-radius:var(--radius-pill);font-size:12px;font-weight:500;background: var(--button-primary-bg);color: var(--button-primary-ink);transition:transform .25s,background .25s,color .25s}.btn:hover{transform:translateY(-3px);background: var(--button-primary-hover)}.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.btn-light:hover{background:white}.btn-outline{background:transparent;color:inherit;border-color:currentColor}.btn-outline:hover{background: var(--button-ghost-hover);color: var(--ink)}.arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;transition:transform .25s}.btn:hover .arrow,.text-link:hover .arrow{transform:translate(2px,-2px)}.text-link{font-size:12px;display:inline-flex;align-items:center;gap:20px;padding-block:8px;border-bottom:1px solid currentColor}.skip-link{position:fixed;top:-80px;left:20px;z-index:100;background:#fff;color:var(--neutral-975);padding:16px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    /* The quiet masthead anchors a deliberately expressive first fold. */
    .header{position:sticky;top:0;z-index:30;background:#ffffff;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:32px}.logo{width:170px;display:block}.logo img{width:100%}.nav-links{display:flex;align-items:center;gap:33px;margin-left:70px}.nav-links a{font-size:12px;position:relative;padding:10px 0}.nav-links a::after{content:'';position:absolute;bottom:3px;left:0;width:0;height:1px;background:currentColor;transition:width .25s}.nav-links a:hover::after{width:100%}.nav-end{display:flex;align-items:center;gap:24px}.login{font-size:12px}.nav .btn{min-height:40px;padding:10px 18px;font-size:11px;gap:19px}.menu-toggle{display:none;width:40px;height:40px;background:transparent}.menu-toggle span{display:block;width:22px;height:1px;background:currentColor;margin:6px auto;transition:transform .25s}
    .hero{padding-top:72px;overflow:hidden}.hero-layout{display:grid;grid-template-columns:1fr 1fr;min-height:570px;gap:30px;align-items:center}.hero-copy{position:relative;z-index:3;padding-bottom:42px}.hero h1{font-size:clamp(76px,8.6vw,137px);line-height:.99;letter-spacing:-.08em;margin:29px 0 29px;font-weight:500}.hero h1 span{display:block}.hero h1 .last-word{position:relative;width:max-content}.hero-copy .sub{font-size:15px;max-width:340px;line-height:1.75}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:31px}.hero-note{font-size:10px;color:var(--muted);margin-top:17px}.hero-art{height:540px;position:relative;isolation:isolate;transform:translate(3px,-8px)}.hero-art::before{content:'';position:absolute;width:415px;height:415px;border:1px solid var(--neutral-200);border-radius:var(--radius-round);top:42px;left:45px}.hero-art::after{content:'';position:absolute;width:510px;height:510px;border:1px solid var(--neutral-200);border-radius:var(--radius-round);top:-5px;left:-2px;z-index:-1}.portrait-card{position:absolute;left:105px;top:4px;width:338px;height:445px;background:#b9adc9;transform:rotate(7deg);box-shadow:0 24px 45px color-mix(in srgb, var(--neutral-900) 8.235%, transparent);overflow:hidden}.portrait-card .poster-meta{position:absolute;top:17px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;z-index:2}.portrait-card img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 10%;bottom:0}.portrait-card .poster-type{position:absolute;bottom:22px;left:21px;font-family:Georgia,serif;font-size:65px;line-height:.88;letter-spacing:-.065em;color:white;z-index:2}.type-card{position:absolute;top:36px;left:-19px;width:177px;height:195px;background:var(--lime);transform:rotate(-11deg);padding:18px;box-shadow:0 12px 20px color-mix(in srgb, var(--neutral-900) 4.314%, transparent);display:flex;flex-direction:column;justify-content:space-between}.type-card small{font-size:8px;text-transform:uppercase;letter-spacing:.12em}.type-card strong{font-weight:400;font-size:91px;line-height:.8;letter-spacing:-.13em;margin-left:-5px}.type-card .type-bottom{font-size:9px;display:flex;justify-content:space-between;align-items:end}.type-card .swatches{display:flex}.type-card .swatches i{width:12px;height:12px;border-radius:var(--radius-round);margin-left:-3px;border:1px solid var(--lime);background:#191a17}.type-card .swatches i:nth-child(2){background:#817873}.type-card .swatches i:nth-child(3){background:white}.art-tile{position:absolute;width:194px;height:207px;right:-5px;bottom:21px;background:#ff774f;transform:rotate(-7deg);padding:14px;box-shadow:0 20px 35px color-mix(in srgb, var(--neutral-900) 6.275%, transparent);display:flex;flex-direction:column;justify-content:space-between}.art-tile small{font-size:8px;text-transform:uppercase;letter-spacing:.1em}.art-tile svg{width:133px;height:133px;align-self:center}.art-tile .tile-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px}.art-tile .tile-foot svg{width:15px;height:15px}.selection-frame{position:absolute;left:92px;top:-9px;width:365px;height:472px;border:1px solid #fff9;transform:rotate(7deg);pointer-events:none}.selection-frame i{position:absolute;width:6px;height:6px;background:white;border:1px solid var(--neutral-400)}.selection-frame i:nth-child(1){top:-3px;left:-3px}.selection-frame i:nth-child(2){top:-3px;right:-3px}.selection-frame i:nth-child(3){bottom:-3px;left:-3px}.selection-frame i:nth-child(4){bottom:-3px;right:-3px}.cursor-tag{position:absolute;bottom:86px;left:52px;font-size:10px;transform:rotate(-5deg)}.cursor-tag svg{width:24px;height:28px;fill:var(--ink);stroke:var(--paper);stroke-width:1.3;display:block;transform:translate(-15px,2px)}.cursor-tag span{display:inline-block;background:var(--ink);color:#fff;padding:8px 12px;border-radius:0 5px 5px}.art-coordinate{position:absolute;right:10px;top:-15px;font-size:9px;letter-spacing:.08em;writing-mode:vertical-rl;color:var(--muted)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:23px 0 25px;margin-top:12px;gap:25px}.hero-bottom>p{font-size:10px;color:var(--muted);white-space:nowrap}.format-links{display:flex;gap:25px;flex-wrap:wrap}.format-links a{font-size:11px;display:flex;align-items:center;gap:8px}.format-links a:hover{opacity:.5}.format-icon{width:13px;height:16px;border:1px solid currentColor;border-radius:1px;display:block}.format-icon.wide{width:19px;height:12px}.format-icon.stack{box-shadow:3px 3px 0 -1px var(--paper),3px 3px 0 currentColor}.scroll-cue{font-size:10px;display:flex;gap:12px;align-items:center}.scroll-cue .arrow{transform:rotate(135deg);width:13px}
    /* Product canvas, unchanged product imagery, deliberately full-scale. */
    .studio-section{background:var(--dark);color:var(--paper);padding-top:75px;overflow:hidden;--line:var(--neutral-800);--muted:var(--neutral-400)}.studio-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:58px}.studio-head .display{font-size:clamp(38px,4.6vw,66px)}.studio-side{max-width:300px;flex-shrink:0;padding-bottom:5px}.studio-side .sub{font-size:13px;margin-bottom:22px}.editor-stage{background:#c4b8df;padding:40px 55px 0;border-radius:var(--radius-surface) var(--radius-surface) 0 0;position:relative}.editor-stage::before{content:'PANDERA / DESIGN STUDIO';position:absolute;left:18px;top:13px;font-size:8px;letter-spacing:.15em;color:var(--neutral-800)}.editor-stage img{width:100%;height:auto;box-shadow:0 0 0 1px #ffffff22,0 20px 50px color-mix(in srgb, var(--neutral-900) 26.667%, transparent);border-radius:var(--radius-surface) var(--radius-surface) 0 0}.studio-features{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;padding-top:45px}.studio-feature{border-top:1px solid var(--line);padding-top:21px}.studio-feature .feature-top{display:flex;justify-content:space-between;gap:20px}.studio-feature h3{font-size:16px;letter-spacing:-.03em}.studio-feature .n{font-size:10px;color: var(--text-secondary-dark)}.studio-feature p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px;max-width:290px}
    .brand-section{background:#ede5fa;--line:#d3c8e3;padding-bottom:110px}.brand-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:95px;align-items:center}.brand-copy .display{font-size:clamp(40px,4.8vw,68px)}.brand-copy>.sub{margin-top:26px;max-width:370px;font-size:14px}.brand-steps{margin-top:35px}.brand-step{padding:17px 0;border-bottom:1px solid var(--line);display:flex;gap:17px;align-items:baseline}.brand-step span{font-size:10px;color:var(--muted)}.brand-step h3{font-size:12px;font-weight:400}.brand-copy>.text-link{margin-top:29px}.brand-demo{background:#ded1f1;min-height:535px;border-radius:var(--radius-surface);padding:26px;transition:background .4s}.demo-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:25px}.demo-top span{display:flex;align-items:center;gap:7px}.demo-top span::before{content:'';width:5px;height:5px;border-radius:var(--radius-round);background:currentColor}.brand-tabs{display:flex;gap:4px;background: var(--button-track-bg);padding:4px;border-radius:var(--radius-pill);width:max-content;max-width:100%;margin-bottom:29px}.brand-tabs button{background:transparent;padding:10px 17px;font-size:10px;border-radius:var(--radius-pill);white-space:nowrap}.brand-tabs button[aria-pressed=true]{background: var(--button-selected-bg);box-shadow:0 2px 4px color-mix(in srgb, var(--neutral-1000) 3.137%, transparent)}.brand-specimen{display:grid;grid-template-columns:1fr 1fr;gap:10px;--brand-main:#31283b;--brand-soft:#d1bdd5;--brand-accent:#a5aa8b}.specimen-logo,.specimen-type{background:#f9f8f3;min-height:163px;padding:18px;display:flex;flex-direction:column;justify-content:space-between}.specimen-label{font-size:8px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}.specimen-logo strong{font-family:Georgia,serif;font-size:32px;letter-spacing:-.07em;line-height:1.1;font-weight:400}.specimen-logo strong em{display:block;font-size:60px;font-style:normal;margin-bottom:7px}.specimen-type strong{font-family:Georgia,serif;font-size:77px;line-height:1;font-weight:400;letter-spacing:-.07em}.specimen-type small{font-size:8px}.palette{grid-column:1/-1;display:flex;height:54px}.palette i{flex:1;transition:background .4s}.palette i:nth-child(1){background:var(--brand-main)}.palette i:nth-child(2){background:var(--brand-soft)}.palette i:nth-child(3){background:var(--brand-accent)}.palette i:last-child{background:#faf9f4}.specimen-voice{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;background:#ffffff70;padding:20px 17px}.voice-tags{display:flex;gap:5px}.voice-tags span{border:1px solid color-mix(in srgb, var(--neutral-1000) 13.333%, transparent);border-radius:var(--radius-pill);font-size:8px;padding:5px 8px}.brand-demo-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;font-size:9px}.brand-demo-foot .arrow{width:14px;height:14px}
    /* A living gallery takes the place of a conventional feature-card grid. */
    .gallery-section{background:#ffffff;padding-top:76px;padding-bottom:76px;overflow:hidden}.gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:45px}.gallery-head .display{font-size:clamp(42px,5.5vw,80px)}.gallery-head-right{max-width:270px;padding-top:5px}.gallery-head-right .sub{font-size:12px;line-height:1.8}.gallery-controls{display:flex;gap:8px;margin-top:20px}.circle-btn{width:39px;height:39px;border:0;border-radius:var(--radius-round);display:grid;place-items:center;background: var(--button-neutral-bg);transition:background .25s}.circle-btn:hover{background: var(--button-neutral-hover)}.circle-btn .arrow{width:15px}.circle-btn:first-child .arrow{transform:rotate(180deg)}.gallery-rail{display:flex;gap:18px;overflow:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 var(--gutter) 6px;scroll-padding-left:var(--gutter)}.gallery-rail[data-autoplay="true"]{scroll-snap-type:none;will-change:scroll-position}.gallery-rail::-webkit-scrollbar{display:none}.work-card{width:calc((100vw - var(--gutter)*2 - 36px)/3);min-width:260px;max-width:440px;flex-shrink:0;scroll-snap-align:start}.work-card a{display:block;overflow:hidden;background:var(--neutral-200)}.work-card img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .6s var(--ease)}.work-card a:hover img{transform:scale(1.025)}.work-card:nth-child(1) a{background:#040f1c}.work-card:nth-child(2) a{background:#a897f2}.work-card:nth-child(3) a{background:#fdcb03}.work-card:nth-child(4) a{background:#08e3fd}.work-card:nth-child(5) a{background:#00052a}.work-card:nth-child(6) a{background:#f70101}.work-card figcaption{display:flex;justify-content:space-between;font-size:10px;padding-top:16px}.work-card figcaption span{color:var(--muted);font-size:9px}.gallery-foot{display:flex;align-items:center;justify-content:center;margin-top:39px}.gallery-foot>span{display:none}
    .tool-section{background:var(--paper)}.tool-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:50px}.tool-head>.sub{max-width:310px;font-size:13px}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tool-card{overflow:hidden;border-radius:var(--radius-surface);background:var(--neutral-150)}.tool-visual{height:425px;position:relative;overflow:hidden}.tool-text{padding:31px 30px 32px;display:flex;justify-content:space-between;gap:25px;background:var(--neutral-100)}.tool-text h3{font-size:24px;letter-spacing:-.05em;margin-bottom:12px}.tool-text p{font-size:12px;color:var(--muted);line-height:1.8;max-width:325px}.tool-text>a{flex-shrink:0;align-self:flex-start;margin-top:5px}.mockup-visual{--split:50%;background:#e4dce7}.mockup-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mockup-visual .mockup-after{clip-path:inset(0 0 0 var(--split))}.compare-label{position:absolute;top:24px;background:color-mix(in srgb, var(--neutral-50) 87.059%, transparent);padding:8px 11px;border-radius:var(--radius-pill);font-size:9px;z-index:2;pointer-events:none}.compare-label.before{left:22px}.compare-label.after{right:22px}.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:#fff;pointer-events:none;z-index:3}.compare-divider::after{content:'↔';font-family:Arial,sans-serif;font-size:20px;position:absolute;left:0;top:50%;transform:translate(-50%,-50%);border-radius:var(--radius-round);width:41px;height:41px;display:grid;place-items:center;background:white;color:var(--neutral-900);box-shadow:0 2px 10px color-mix(in srgb, var(--neutral-1000) 13.333%, transparent)}.compare-input{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.mockup-visual:focus-within{outline:2px solid var(--ink);outline-offset:4px}.tool-foot{display:flex;justify-content:space-between;align-items:center;border-bottom:0;padding:33px 0 20px;font-size:11px}.tool-foot span:last-child{font-size:10px;color:var(--muted)}
    .platform-section{padding-top:105px;padding-bottom:100px}.platform-head{text-align:center;max-width:760px;margin:auto}.platform-head .eyebrow{justify-content:center;margin-bottom:25px}.platform-head>.sub{max-width:510px;margin:24px auto 0;font-size:13px}.platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}.platform-item{border-top:1px solid var(--line);padding-top:23px}.platform-item .item-no{font-size:9px;color:var(--muted);margin-bottom:27px}.platform-item h3{font-size:15px;letter-spacing:-.035em;margin-bottom:13px}.platform-item p{font-size:11px;color:var(--muted);line-height:1.85}.platform-item>a{margin-top:22px;font-size:10px}.engine-strip{border-top:1px solid var(--line);margin-top:64px;padding-top:32px;display:flex;align-items:center;justify-content:space-between;gap:25px}.engine-strip>span{font-size:10px;color:var(--muted)}.engine-names{display:flex;justify-content:space-between;align-items:center;width:75%;gap:20px;font-size:22px;letter-spacing:-.05em}.engine-names span:nth-child(2){font-family:Georgia,serif;font-style:italic;letter-spacing:-.045em}.engine-names span:nth-child(3){font-weight:700;font-size:20px}.engine-names span:nth-child(4){font-size:27px;font-weight:700;letter-spacing:-.065em}
    .share-section{background:var(--dark);color:var(--paper);padding:74px 0;overflow:hidden}.share-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:85px}.share-copy .eyebrow{color: var(--text-secondary-dark);margin-bottom:22px}.share-copy .display{font-size:clamp(38px,4.5vw,64px)}.share-copy .sub{color: var(--text-secondary-dark);font-size:13px;margin-top:22px}.share-copy>.text-link{margin-top:25px}.share-art{position:relative;min-height:295px;display:flex;justify-content:center;align-items:center}.share-image{width:240px;transform:rotate(-6deg);border:6px solid #fff;border-radius:var(--radius-surface);box-shadow:0 25px 35px color-mix(in srgb, var(--neutral-1000) 13.333%, transparent)}.share-bubble{position:absolute;right:0;bottom:27px;background:var(--neutral-50);color:var(--ink);border-radius:7px;padding:17px 20px;width:250px;box-shadow:0 10px 25px color-mix(in srgb, var(--neutral-1000) 13.333%, transparent);transform:rotate(3deg)}.share-bubble .comment-person{display:flex;gap:10px;align-items:center;font-size:10px}.comment-avatar{width:25px;height:25px;display:grid;place-items:center;border-radius:var(--radius-round);background:#d4c9e4;font-size:11px}.share-bubble p{font-size:10px;line-height:1.7;margin:10px 0 0 35px}.share-cursor{position:absolute;top:20px;left:12px;transform:rotate(-10deg);font-size:10px;border:1px solid #ffffff50;padding:10px 15px;border-radius:var(--radius-pill)}
    .pricing-section{padding-bottom:90px}.pricing-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px}.pricing-head>.sub{font-size:12px;padding-bottom:5px}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius-surface);overflow:hidden}.price-card{padding:33px 30px 37px;position:relative}.price-card+.price-card{border-left:1px solid var(--line)}.price-card.featured{background:var(--neutral-150)}.price-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.price-top h3{font-size:16px}.price-badge{font-size:8px;border:1px solid var(--neutral-500);border-radius:var(--radius-pill);padding:5px 9px}.price-amount{font-size:66px;line-height:1.2;letter-spacing:-.075em}.price-period{font-size:10px;color:var(--muted);margin-top:5px}.price-description{font-size:11px;line-height:1.8;color:var(--muted);margin-top:23px;min-height:43px;max-width:235px}.price-card>.btn{width:100%;margin:25px 0 30px;min-height:46px;font-size:11px;justify-content:space-between}.price-card ul{list-style:none;padding:0;margin:0}.price-card li{position:relative;padding-left:22px;font-size:11px;margin-bottom:15px}.price-card li:last-child{margin:0}.price-card li::before{content:'✓';position:absolute;left:0;font-family:Arial,sans-serif;font-size:12px}.comparison{margin-top:24px;border-bottom:1px solid var(--line)}.comparison>summary{font-size:11px;padding:15px 0 21px;cursor:pointer;list-style:none;display:flex;justify-content:center;align-items:center;gap:15px}.comparison>summary::-webkit-details-marker{display:none}.comparison>summary::after{content:'+';font-size:20px;font-weight:400}.comparison[open]>summary::after{content:'−'}.table-wrap{overflow:auto;padding-bottom:25px}.comparison table{width:100%;border-collapse:collapse;min-width:560px;text-align:left;font-size:11px}.comparison th,.comparison td{padding:15px;border-bottom:1px solid var(--line)}.comparison thead th{background:var(--neutral-150);font-weight:500}.comparison tbody th{font-weight:400}.faq-section{padding-top:10px;padding-bottom:100px}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:95px}.faq-copy .eyebrow{margin-bottom:24px}.faq-copy .display{font-size:49px}.faq-copy .sub{font-size:12px;margin-top:24px;max-width:260px}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{padding:22px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:30px;font-size:12px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';font-family:Arial,sans-serif;font-size:21px;font-weight:300;flex-shrink:0}.faq-item[open] summary::after{content:'−'}.faq-item p{font-size:12px;color:var(--muted);line-height:1.9;padding:0 35px 24px 0;max-width:590px}
    .final-cta{background:var(--lilac);padding-top:74px;padding-bottom:75px;position:relative;overflow:hidden}.cta-inner{position:relative;z-index:1}.cta-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:45px}.cta-top .asterisk{height:35px;width:35px}.final-cta h2{font-size:clamp(60px,8.5vw,126px);letter-spacing:-.078em;line-height:1.025;max-width:1100px}.cta-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:44px;gap:25px}.cta-buttons{display:flex;align-items:center;gap:27px}.cta-bottom>p{font-size:10px}.footer{background:var(--dark);color:#ffffff;--ink:#ffffff;--muted: var(--text-secondary-dark);--line:var(--neutral-800);padding-top:55px}.footer-main{display:flex;justify-content:space-between;gap:80px;padding-bottom:45px}.footer-brand>.logo{width:141px}.footer-brand>p{font-size:11px;color:var(--muted);line-height:1.8;max-width:200px;margin-top:20px}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:80px}.footer-links h3{font-size:10px;margin-bottom:20px}.footer-links a{display:block;font-size:10px;color:var(--muted);margin:13px 0}.footer-links a:hover{color:var(--ink)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:22px 0 25px;color:var(--muted);font-size:9px}.footer-bottom a{display:flex;align-items:center;gap:9px}.footer-bottom .arrow{width:13px;height:13px}.footer-wordmark{font-size:clamp(90px,22.3vw,340px);font-weight:500;letter-spacing:-.085em;line-height:.85;text-align:center;overflow:hidden;padding-top:7px;padding-bottom:12px;border-top:1px solid var(--line);color: var(--text-secondary-light);user-select:none}
    @media(prefers-reduced-motion:no-preference){.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.pending{opacity:0;transform:translateY(28px)}.hero-copy{animation:enter .9s var(--ease) both}.hero-art{animation:art-enter 1.2s var(--ease) both}.hero-art:hover .portrait-card{transform:rotate(4deg) translateY(-5px)}.hero-art:hover .type-card{transform:rotate(-14deg) translate(-5px,-6px)}.hero-art:hover .art-tile{transform:rotate(-2deg) translate(4px,-4px)}.portrait-card,.type-card,.art-tile{transition:transform .75s var(--ease)}@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes art-enter{from{opacity:0;transform:translate(3px,12px) rotate(3deg)}to{opacity:1;transform:translate(3px,-8px) rotate(0)}}}
    @media(min-width:1600px){.hero-art{margin-left:35px}.hero-layout{gap:60px}.portrait-card{width:370px;height:475px}.selection-frame{width:396px;height:502px}.art-tile{right:8px}.hero{padding-top:85px}.hero-layout{min-height:600px}}
    @media(max-width:1100px){.nav-links{margin-left:0;gap:21px}.nav-end{gap:17px}.hero-layout{min-height:540px;grid-template-columns:1fr 1fr;gap:0}.hero-art{transform:scale(.85);transform-origin:left center;width:500px;animation:none}.hero h1{font-size:9.1vw}.hero-actions{gap:16px}.hero-actions .text-link{font-size:10px}.hero-actions .btn{padding-inline:19px;gap:19px}.hero-copy>.sub{font-size:13px}.brand-layout{gap:50px}.brand-demo{padding:22px;min-height:520px}.brand-tabs button{padding-inline:12px}.voice-tags{gap:4px}.voice-tags span{padding:4px 6px;font-size:7px}.specimen-voice{padding:17px 12px}.specimen-logo strong{font-size:27px}.section{padding-block:85px}.tool-visual{height:380px}.footer-links{gap:55px}.faq-layout{gap:60px}.share-layout{gap:40px}.price-card{padding-inline:23px}.format-links{gap:20px}.scroll-cue{display:none}}
    @media(max-width:800px){:root{--gutter:28px}.nav{height:72px;gap:20px}.logo{width:149px}.nav-links{gap:18px}.nav-links a{font-size:10px}.login{display:none}.nav .btn{font-size:10px;min-height:36px;padding:9px 14px;gap:12px}.hero{padding-top:45px}.hero-layout{min-height:460px}.hero-art{transform:scale(.68);width:500px;transform-origin:left center;margin-left:-10px;height:530px}.hero h1{font-size:9.6vw}.hero-copy{padding-bottom:15px}.hero-copy .eyebrow{font-size:8px}.hero-copy>.sub{font-size:12px;max-width:275px}.hero-actions{align-items:start;flex-direction:column;gap:12px;margin-top:25px}.hero-actions .text-link{display:none}.hero h1{margin-block:23px}.hero-bottom{margin-top:-20px}.hero-bottom>p{font-size:8px}.format-links{gap:15px}.format-links a{font-size:9px}.studio-head{gap:30px}.studio-side{max-width:235px}.studio-side .sub{font-size:11px}.editor-stage{padding:30px 25px 0}.studio-features{gap:25px}.studio-feature h3{font-size:13px}.studio-feature p{font-size:11px}.brand-layout{gap:35px}.brand-demo{padding:17px;min-height:470px}.brand-tabs{gap:0;margin-bottom:20px}.brand-tabs button{font-size:8px;padding:8px 10px}.specimen-logo,.specimen-type{min-height:150px;padding:13px}.specimen-logo strong{font-size:24px}.specimen-type strong{font-size:67px}.specimen-voice{align-items:start;gap:10px;flex-direction:column}.brand-copy>.sub{font-size:12px}.brand-step{gap:10px}.brand-step h3{font-size:10px}.tool-visual{height:340px}.tool-text{padding:25px 22px}.tool-text h3{font-size:21px}.tool-text p{font-size:11px}.tool-foot{font-size:10px}.tool-foot span:last-child{font-size:8px}.platform-grid{gap:20px}.platform-item h3{font-size:13px}.platform-item p{font-size:10px}.engine-names{font-size:19px;gap:15px}.engine-names span:nth-child(3){font-size:17px}.engine-names span:nth-child(4){font-size:22px}.price-card{padding:25px 19px 28px}.price-amount{font-size:58px}.price-description{font-size:10px;min-height:55px}.price-card li{font-size:9px;padding-left:17px}.price-card>.btn{font-size:10px;padding-inline:15px}.price-period{font-size:8px}.faq-layout{gap:50px}.faq-copy .display{font-size:39px}.share-image{width:200px}.share-bubble{width:230px;padding:15px;right:-5px}.footer-links{gap:40px}.footer-main{gap:40px}}
    @media(max-width:620px){:root{--gutter:22px}.section{padding-block:66px}.section-label{margin-bottom:36px;padding-bottom:18px;font-size:9px}.section-label>span:last-child{font-size:8px}.header{backdrop-filter:blur(12px)}.nav{height:66px;gap:12px}.logo{width:142px}.nav-end{gap:10px}.menu-toggle{display:block}.nav .btn{min-height:35px;padding:8px 13px;font-size:9px;gap:9px}.nav .btn .arrow{width:12px}.nav-links{position:absolute;display:none;left:0;right:0;top:66px;padding:18px var(--gutter) 25px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 12px color-mix(in srgb, var(--neutral-1000) 1.961%, transparent)}.nav-links.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.nav-links a{font-size:15px;padding:15px 0}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.hero{padding-top:44px}.hero-layout{display:block;min-height:0}.hero-copy{padding-bottom:0}.hero-copy .eyebrow{font-size:9px}.hero h1{font-size:clamp(60px,18.5vw,103px);line-height:1.02;letter-spacing:-.08em;margin-block:23px}.hero-copy>.sub{font-size:13px;max-width:320px}.hero-actions{flex-direction:row;align-items:center;gap:23px;margin-top:25px}.hero-actions .btn{min-height:47px;font-size:11px;padding:13px 20px}.hero-actions .text-link{display:inline-flex;font-size:10px;gap:10px}.hero-note{font-size:9px;margin-top:13px}.hero-art{width:340px;height:385px;margin:39px auto 0;transform:none;animation:none}.hero-art::before{width:275px;height:275px;top:42px;left:35px}.hero-art::after{width:330px;height:330px;left:6px;top:15px}.portrait-card{left:69px;top:14px;width:229px;height:305px}.portrait-card .poster-meta{font-size:6px;left:14px;right:14px;top:14px}.portrait-card .poster-type{font-size:46px;left:16px;bottom:18px}.type-card{left:0;top:38px;width:121px;height:138px;padding:13px}.type-card small{font-size:6px}.type-card strong{font-size:62px}.type-card .type-bottom{font-size:6px}.type-card .swatches i{width:9px;height:9px}.art-tile{width:131px;height:146px;right:0;bottom:17px;padding:10px}.art-tile small{font-size:5px}.art-tile>svg{width:94px;height:94px}.art-tile .tile-foot{font-size:6px}.selection-frame{left:60px;top:4px;width:247px;height:325px}.cursor-tag{left:30px;bottom:46px;font-size:8px}.cursor-tag span{padding:7px 10px}.cursor-tag svg{width:20px;height:24px}.art-coordinate{font-size:7px;right:0;top:0}.hero-bottom{margin-top:13px;padding-block:20px;align-items:flex-start;gap:16px;flex-direction:column}.hero-bottom>p{font-size:9px}.format-links{gap:19px;width:100%;justify-content:space-between}.format-links a{font-size:9px;gap:6px}.format-icon{width:10px;height:13px}.format-icon.wide{width:15px;height:10px}.format-links a:nth-child(3){display:none}.studio-head{display:block;margin-bottom:32px}.studio-head .display{font-size:38px}.studio-side{max-width:100%;margin-top:24px}.studio-side .sub{font-size:12px;max-width:330px;margin-bottom:17px}.studio-side .text-link{font-size:11px}.editor-stage{padding:25px 11px 0;margin-inline:-8px;border-radius:var(--radius-surface) var(--radius-surface) 0 0}.editor-stage::before{left:11px;top:10px;font-size:6px}.editor-stage img{border-radius:var(--radius-surface) var(--radius-surface) 0 0}.studio-features{grid-template-columns:1fr;padding-top:30px;gap:25px}.studio-feature{position:relative;padding-left:39px;padding-top:20px}.studio-feature .icon{position:absolute;left:0;top:21px}.studio-feature h3{font-size:15px}.studio-feature p{font-size:11px;max-width:100%;margin-top:9px}.brand-layout{grid-template-columns:1fr;gap:35px}.brand-copy .display{font-size:43px}.brand-copy>.sub{font-size:13px;margin-top:21px}.brand-steps{margin-top:23px}.brand-step h3{font-size:11px}.brand-copy>.text-link{font-size:11px;margin-top:22px}.brand-demo{padding:23px;min-height:490px}.brand-tabs button{font-size:9px;padding:9px 13px}.specimen-logo,.specimen-type{min-height:159px;padding:17px}.specimen-logo strong{font-size:30px}.specimen-voice{flex-direction:row;align-items:center}.voice-tags span{font-size:7px}.gallery-section{padding-block:55px}.gallery-head{gap:25px;display:block;margin-bottom:28px}.gallery-head .display{font-size:48px}.gallery-head-right{display:flex;justify-content:space-between;gap:25px;max-width:none;align-items:end;margin-top:22px}.gallery-head-right .sub{font-size:11px;max-width:230px}.gallery-controls{margin:0;flex-shrink:0}.circle-btn{width:34px;height:34px}.work-card{width:76vw;min-width:0}.gallery-rail{gap:14px}.gallery-foot{margin-top:24px;gap:18px}.gallery-foot>span{font-size:8px}.gallery-foot .text-link{font-size:10px;gap:12px}.tool-head{display:block;margin-bottom:30px}.tool-head .display{font-size:42px}.tool-head>.sub{font-size:12px;margin-top:21px;max-width:330px}.tools-grid{grid-template-columns:1fr;gap:25px}.tool-visual{height:355px}.tool-text{padding:26px 23px}.tool-text h3{font-size:24px}.tool-text p{font-size:11px}.tool-foot{padding-top:25px;gap:13px;align-items:start;flex-direction:column}.tool-foot span:last-child{font-size:9px}.platform-section{padding-block:62px}.platform-head{text-align:left}.platform-head .eyebrow{justify-content:flex-start;font-size:9px}.platform-head .display{font-size:39px}.platform-head>.sub{font-size:12px}.platform-grid{grid-template-columns:1fr 1fr;gap:32px 24px;margin-top:35px}.platform-item .item-no{margin-bottom:18px}.platform-item h3{font-size:14px}.platform-item p{font-size:10px}.engine-strip{flex-direction:column;align-items:start;gap:23px;margin-top:36px;padding-top:24px}.engine-names{width:100%;gap:13px;flex-wrap:wrap;font-size:19px}.engine-names span:nth-child(3){font-size:16px}.engine-names span:nth-child(4){font-size:21px}.share-section{padding-block:57px}.share-layout{grid-template-columns:1fr;gap:32px}.share-copy .display{font-size:44px}.share-copy .sub{font-size:12px;max-width:320px}.share-art{min-height:300px}.share-image{width:232px}.share-cursor{top:8px;left:12px}.share-bubble{right:0;bottom:5px}.pricing-head{display:block;margin-bottom:30px}.pricing-head .display{font-size:42px}.pricing-head>.sub{margin-top:19px;font-size:12px}.price-grid{grid-template-columns:1fr;overflow:visible;gap:15px;border:0}.price-card{border:1px solid var(--line);border-radius:var(--radius-surface);padding:28px}.price-card+.price-card{border-left:1px solid var(--line)}.price-top{margin-bottom:20px}.price-top h3{font-size:17px}.price-amount{font-size:63px}.price-period{font-size:10px}.price-description{font-size:12px;min-height:0;max-width:none;margin-top:19px}.price-card>.btn{font-size:11px;margin:23px 0}.price-card li{font-size:11px;padding-left:23px}.comparison>summary{font-size:11px}.faq-section{padding-top:0;padding-bottom:64px}.faq-layout{grid-template-columns:1fr;gap:29px}.faq-copy .display{font-size:41px}.faq-copy .eyebrow{margin-bottom:18px}.faq-copy .sub{font-size:12px;margin-top:18px}.faq-item summary{font-size:12px;padding:21px 0}.faq-item p{font-size:11px;padding-right:20px}.final-cta{padding-block:44px}.cta-top{font-size:8px;margin-bottom:30px}.cta-top .eyebrow{font-size:8px}.cta-top .asterisk{width:26px;height:26px}.final-cta h2{font-size:clamp(47px,11.5vw,71px);line-height:1.07;letter-spacing:-.073em}.cta-bottom{margin-top:30px;display:block}.cta-buttons{gap:19px;flex-wrap:wrap}.cta-buttons .btn{min-height:46px;font-size:11px;gap:18px;padding-inline:19px}.cta-buttons .text-link{font-size:10px;gap:12px}.cta-bottom>p{margin-top:21px;font-size:9px}.footer{padding-top:37px}.footer-main{display:block;padding-bottom:25px}.footer-brand>p{max-width:none;font-size:10px;margin-top:14px}.footer-links{margin-top:31px;gap:20px}.footer-links h3{font-size:10px}.footer-links a{font-size:9px}.footer-bottom{font-size:8px;padding-block:20px}.footer-wordmark{font-size:22vw;padding-block:12px 8px}.display{letter-spacing:-.065em}}
    @media(max-width:380px){.hero-art{transform:scale(.9);transform-origin:top left;height:350px}.hero-actions{gap:15px}.hero-actions .btn{font-size:10px;padding-inline:16px;gap:15px}.hero-actions .text-link{font-size:9px;gap:8px}.brand-tabs button{font-size:8px;padding-inline:11px}.voice-tags{flex-wrap:wrap;justify-content:flex-end}.specimen-logo strong{font-size:26px}.format-links{gap:10px}.format-links a{font-size:8px}.engine-names{row-gap:14px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;transform:none}}

    /* Reading typography: generous text sizes, stronger contrast, quiet hierarchy.
       Display headings and the artwork retain their original proportions. */
    :root {
      --muted: var(--text-secondary-light);
      --text-lead: 19px;
      --text-body: 17px;
      --text-detail: 15px;
      --text-label: 12px;
    }
    body { font-size: var(--text-body); line-height: 1.6; letter-spacing: 0; }
    /* Garet carries the display voice; Inter handles reading and interface text. */
    h1, h2, .price-amount {
      font-family: Garet, Arial, sans-serif;
    }
    .hero-art, .engine-names, .footer-wordmark {
      font-family: Garet, Arial, sans-serif;
    }
    .eyebrow, .hero-copy .eyebrow, .platform-head .eyebrow, .cta-top .eyebrow {
      font-size: var(--text-label); font-weight: 500; letter-spacing: .085em; line-height: 1.5;
    }
    .section-label { font-size: var(--text-label); font-weight: 500; letter-spacing: .065em; gap: 24px; }
    .section-label > span:last-child { font-size: var(--text-label); opacity: 1; text-align: right; }
    .sub, .hero-copy .sub, .studio-side .sub, .brand-copy > .sub,
    .gallery-head-right .sub, .tool-head > .sub, .mock-copy .sub,
    .platform-head > .sub, .share-copy .sub, .pricing-head > .sub, .faq-copy .sub {
      font-family: Inter, Arial, sans-serif;
      font-size: var(--text-body); font-weight: 400; line-height: 1.7; letter-spacing: 0;
    }
    .hero-copy .sub { font-size: var(--text-lead); line-height: 1.65; max-width: 440px; }
    .brand-copy > .sub { max-width: 435px; }
    .studio-side { max-width: 350px; }
    .gallery-head-right { max-width: 350px; }
    .tool-head > .sub { max-width: 350px; }
    .platform-head > .sub { max-width: 610px; }
    .faq-copy .sub { max-width: 340px; }
    .hero-note, .hero-bottom > p, .scroll-cue { font-size: 13px; }
    .hero-bottom { flex-wrap: wrap; }
    .format-links a { font-size: 14px; font-weight: 500; }
    .format-links { gap: 22px; }
    .nav-links { gap: 28px; margin-left: 30px; }
    .nav-links a, .login { font-size: 14px; font-weight: 500; letter-spacing: .025em; }
    .btn, .hero-actions .btn, .price-card > .btn, .cta-buttons .btn {
      font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: .005em;
      min-height: 54px; white-space: nowrap;
    }
    .nav .btn { font-size: 14px; min-height: 44px; }
    .text-link, .hero-actions .text-link, .studio-side .text-link,
    .brand-copy > .text-link, .gallery-foot .text-link, .platform-item > .text-link,
    .cta-buttons .text-link {
      font-size: var(--text-detail); font-weight: 500; line-height: 1.5; letter-spacing: 0;
    }
    .hero-actions { flex-wrap: wrap; gap: 20px 24px; }
    .studio-section { --muted: var(--neutral-250); }
    .studio-feature p, .tool-text p, .platform-item p {
      font-size: 16px; line-height: 1.75; letter-spacing: 0;
    }
    .studio-feature p { max-width: 340px; }
    .studio-feature h3 { font-family: Garet, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
    .platform-item h3 { font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
    .studio-feature .n { font-size: 12px; color: var(--neutral-300); }
    .brand-step h3 { font-family: Inter, Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
    .brand-step span { font-size: 12px; }
    .brand-step { padding-block: 19px; }
    .demo-top { font-size: 13px; font-weight: 500; }
    .brand-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .brand-tabs button { font-size: 13px; font-weight: 400; padding: 12px 8px; color: var(--muted); }
    .specimen-label { font-size: 11px; font-weight: 500; letter-spacing: .075em; opacity: 1; }
    .specimen-type small { font-size: 12px; }
    .voice-tags { flex-wrap: wrap; justify-content: flex-end; }
    .voice-tags span { font-size: 11px; padding: 6px 9px; line-height: 1.4; }
    .specimen-voice { gap: 15px; }
    .brand-demo-foot { font-size: 13px; }
    .work-card figcaption { font-size: 15px; font-weight: 500; flex-wrap: wrap; gap: 5px 18px; line-height: 1.5; }
    .work-card figcaption span { font-size: 12px; font-weight: 400; }
    .gallery-foot > span, .tool-foot, .tool-foot span:last-child { font-size: 14px; line-height: 1.65; }
    .gallery-foot, .tool-foot { flex-wrap: wrap; gap: 16px 30px; }
     .compare-label { font-size: 12px; font-weight: 500; }
    .brand-tabs button[aria-pressed="true"] {
      font-weight: 600; color: var(--ink);
    }
    .tool-text h3 { font-family: Garet, sans-serif; }
    .price-top h3, .footer-links h3 {
      font-weight: 600; letter-spacing: 0;
    }
    .faq-item[open] > summary { font-weight: 600; }
    .platform-item .item-no { font-size: 12px; font-weight: 500; }
    .engine-strip > span { font-size: 14px; }
    .share-copy .sub, .share-copy .eyebrow { color: var(--neutral-250); }
    .share-bubble { width: 285px; }
    .share-bubble .comment-person { font-size: 13px; font-weight: 500; }
    .share-bubble p { font-size: 13px; line-height: 1.6; }
    .share-cursor { font-size: 12px; }
    .price-top h3 { font-size: 20px; font-weight: 600; line-height: 1.4; }
    .price-badge { font-size: 11px; font-weight: 500; padding: 6px 11px; }
    .price-period { font-size: 14px; line-height: 1.5; }
    .price-description { font-size: 16px; line-height: 1.65; min-height: 80px; max-width: 320px; }
    .price-card li { font-size: 15px; line-height: 1.55; padding-left: 25px; margin-bottom: 16px; }
    .price-card li::before { font-size: 15px; }
    .comparison > summary { font-size: 15px; font-weight: 500; padding-block: 7px 29px; }
    .comparison table { font-size: 14px; line-height: 1.65; }
    .faq-item summary { font-size: 17px; font-weight: 500; line-height: 1.5; padding-block: 25px; letter-spacing: 0; }
    .faq-item p { font-size: 16px; line-height: 1.8; padding-bottom: 28px; }
    .cta-bottom > p { font-size: 15px; }
    .footer { --muted: var(--text-secondary-dark); }
    .footer-brand > p { font-size: 15px; line-height: 1.75; max-width: 285px; }
    .footer-wordmark {
      width: 100%; margin: 0; padding: clamp(22px, 3vw, 56px) 0 0;
      font-size: 0; line-height: 0; color: #fff;
    }
    .footer-wordmark-ink { position: relative; width: 100%; }
    .footer-wordmark-base { display: block; width: 100%; max-width: none; height: auto; opacity: .16; }
    .footer-wordmark-art {
      --wordmark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20816.74%20212.57%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M103.04%2C34.32c8.58%2C3.81%2C15.16%2C9.28%2C19.73%2C16.4%2C4.58%2C7.12%2C6.86%2C15.57%2C6.86%2C25.36s-2.29%2C18.08-6.86%2C25.26c-4.58%2C7.18-11.15%2C12.68-19.73%2C16.49-8.58%2C3.81-18.65%2C5.72-30.22%2C5.72h-30.12v38.51h-24.78V28.6h54.91c11.56%2C0%2C21.64%2C1.91%2C30.22%2C5.72ZM96.28%2C95.7c5.59-4.58%2C8.39-11.12%2C8.39-19.64s-2.8-15.06-8.39-19.64c-5.59-4.58-13.79-6.86-24.59-6.86h-28.98v53h28.98c10.8%2C0%2C19-2.29%2C24.59-6.86Z%22%2F%3E%3Cpath%20d%3D%22M244.6%2C60.24v101.81h-22.69v-13.15c-3.94%2C4.83-8.8%2C8.45-14.58%2C10.87-5.78%2C2.41-12.17%2C3.62-19.16%2C3.62-9.91%2C0-18.78-2.16-26.6-6.48-7.82-4.32-13.92-10.42-18.3-18.3-4.38-7.88-6.58-17.03-6.58-27.45s2.19-19.54%2C6.58-27.36c4.39-7.82%2C10.49-13.88%2C18.3-18.21%2C7.82-4.32%2C16.68-6.48%2C26.6-6.48%2C6.61%2C0%2C12.68%2C1.14%2C18.21%2C3.43%2C5.53%2C2.29%2C10.32%2C5.66%2C14.39%2C10.1v-12.39h23.83ZM212.57%2C134.21c5.72-5.84%2C8.58-13.54%2C8.58-23.07s-2.86-17.22-8.58-23.07c-5.72-5.84-12.96-8.77-21.73-8.77s-15.98%2C2.93-21.64%2C8.77c-5.66%2C5.85-8.48%2C13.54-8.48%2C23.07s2.83%2C17.22%2C8.48%2C23.07c5.65%2C5.85%2C12.87%2C8.77%2C21.64%2C8.77s16.01-2.92%2C21.73-8.77Z%22%2F%3E%3Cpath%20d%3D%22M357.85%2C70.35c7.75%2C7.5%2C11.63%2C18.62%2C11.63%2C33.36v58.34h-23.83v-55.29c0-8.89-2.1-15.6-6.29-20.11-4.19-4.51-10.17-6.77-17.92-6.77-8.77%2C0-15.7%2C2.64-20.78%2C7.91-5.08%2C5.28-7.63%2C12.87-7.63%2C22.78v51.47h-23.83V60.24h22.69v13.15c3.94-4.7%2C8.9-8.26%2C14.87-10.68%2C5.97-2.41%2C12.71-3.62%2C20.21-3.62%2C12.84%2C0%2C23.13%2C3.75%2C30.88%2C11.25Z%22%2F%3E%3Cpath%20d%3D%22M493.78%2C20.59v141.46h-22.88v-13.15c-3.94%2C4.83-8.8%2C8.45-14.58%2C10.87-5.78%2C2.41-12.17%2C3.62-19.16%2C3.62-9.79%2C0-18.59-2.16-26.4-6.48-7.82-4.32-13.95-10.45-18.4-18.4-4.45-7.94-6.67-17.06-6.67-27.36s2.22-19.38%2C6.67-27.26c4.45-7.88%2C10.58-13.98%2C18.4-18.3%2C7.82-4.32%2C16.62-6.48%2C26.4-6.48%2C6.73%2C0%2C12.9%2C1.14%2C18.49%2C3.43%2C5.59%2C2.29%2C10.36%2C5.72%2C14.3%2C10.29V20.59h23.83ZM455.46%2C139.08c4.58-2.6%2C8.2-6.32%2C10.87-11.15%2C2.67-4.83%2C4-10.42%2C4-16.78s-1.33-11.95-4-16.78c-2.67-4.83-6.29-8.55-10.87-11.15-4.58-2.6-9.72-3.91-15.44-3.91s-10.87%2C1.3-15.44%2C3.91c-4.58%2C2.61-8.2%2C6.32-10.87%2C11.15-2.67%2C4.83-4%2C10.42-4%2C16.78s1.33%2C11.95%2C4%2C16.78c2.67%2C4.83%2C6.29%2C8.55%2C10.87%2C11.15%2C4.58%2C2.61%2C9.72%2C3.91%2C15.44%2C3.91s10.87-1.3%2C15.44-3.91Z%22%2F%3E%3Cpath%20d%3D%22M594.44%2C132.12l12.58%2C14.68c-4.45%2C5.47-10.17%2C9.6-17.16%2C12.39-6.99%2C2.8-14.87%2C4.19-23.64%2C4.19-11.19%2C0-21.04-2.22-29.55-6.67-8.52-4.45-15.09-10.64-19.73-18.59-4.64-7.94-6.96-16.94-6.96-26.98s2.25-18.84%2C6.77-26.79c4.51-7.94%2C10.74-14.14%2C18.68-18.59%2C7.94-4.45%2C16.93-6.67%2C26.98-6.67s18.21%2C2.07%2C26.02%2C6.2c7.82%2C4.13%2C14.01%2C10.04%2C18.59%2C17.73%2C4.58%2C7.69%2C6.86%2C16.68%2C6.86%2C26.98l-77.97%2C15.25c2.41%2C5.85%2C6.29%2C10.29%2C11.63%2C13.35%2C5.34%2C3.05%2C11.75%2C4.58%2C19.26%2C4.58%2C11.06%2C0%2C20.27-3.68%2C27.64-11.06ZM541.15%2C86.74c-5.4%2C5.72-8.1%2C13.41-8.1%2C23.07v.19l57.58-11.06c-1.65-6.23-4.99-11.25-10.01-15.06-5.02-3.81-11.09-5.72-18.21-5.72-8.77%2C0-15.86%2C2.86-21.26%2C8.58Z%22%2F%3E%3Cpath%20d%3D%22M689%2C59.1v22.69c-2.03-.38-3.88-.57-5.53-.57-9.28%2C0-16.52%2C2.7-21.73%2C8.1-5.21%2C5.4-7.82%2C13.19-7.82%2C23.35v49.38h-23.83V60.24h22.69v14.87c6.86-10.68%2C18.94-16.01%2C36.22-16.01Z%22%2F%3E%3Cpath%20d%3D%22M801.1%2C60.24v101.81h-22.69v-13.15c-3.94%2C4.83-8.8%2C8.45-14.58%2C10.87-5.78%2C2.41-12.17%2C3.62-19.16%2C3.62-9.91%2C0-18.78-2.16-26.6-6.48-7.82-4.32-13.92-10.42-18.3-18.3-4.38-7.88-6.58-17.03-6.58-27.45s2.19-19.54%2C6.58-27.36c4.39-7.82%2C10.49-13.88%2C18.3-18.21%2C7.82-4.32%2C16.68-6.48%2C26.6-6.48%2C6.61%2C0%2C12.68%2C1.14%2C18.21%2C3.43%2C5.53%2C2.29%2C10.32%2C5.66%2C14.39%2C10.1v-12.39h23.83ZM769.07%2C134.21c5.72-5.84%2C8.58-13.54%2C8.58-23.07s-2.86-17.22-8.58-23.07c-5.72-5.84-12.96-8.77-21.73-8.77s-15.98%2C2.93-21.64%2C8.77c-5.66%2C5.85-8.48%2C13.54-8.48%2C23.07s2.83%2C17.22%2C8.48%2C23.07c5.65%2C5.85%2C12.87%2C8.77%2C21.64%2C8.77s16.01-2.92%2C21.73-8.77Z%22%2F%3E%3C%2Fsvg%3E");
      position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      opacity: 0; transition: opacity .2s ease; pointer-events: none;
      -webkit-mask: var(--wordmark-mask) center / 100% 100% no-repeat;
      mask: var(--wordmark-mask) center / 100% 100% no-repeat;
    }
    .footer-wordmark-art img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; }
    .footer-wordmark.is-art-visible .footer-wordmark-art { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .footer-wordmark-art { transition: none; }
    }
    .footer-links h3 { font-size: 15px; font-weight: 600; }
    .footer-links a { font-size: 15px; line-height: 1.6; }
    .footer-bottom { font-size: 12px; line-height: 1.6; gap: 20px; }
    .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    @media (max-width: 1100px) {
      .nav-links { margin-left: 0; gap: 22px; }
      .studio-side { max-width: 300px; }
      .brand-layout { gap: 40px; }
      .specimen-voice { flex-direction: column; align-items: flex-start; gap: 12px; }
      .voice-tags { justify-content: flex-start; }
      .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
      .price-card { padding-inline: 25px; }
      .price-description { min-height: 106px; }
      .footer-main { gap: 45px; }
      .footer-links { gap: 36px; }
    }
    @media (max-width: 960px) {
      .nav { height: 72px; }
      .nav-links { position: absolute; display: none; left: 0; right: 0; top: 72px; padding: 18px var(--gutter) 25px; margin: 0; background: #fff; border-bottom: 1px solid var(--line); }
      .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
      .nav-links a { font-size: 17px; padding: 15px 0; }
      .login { display: none; }
      .menu-toggle { display: block; flex-shrink: 0; }
      .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
      .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
      .tool-head { align-items: flex-start; }
      .tool-head > .sub { max-width: 280px; }
      .footer-main { flex-wrap: wrap; }
      .footer-links { flex: 1; min-width: 390px; }
      .price-card { padding-inline: 20px; }
      .price-card li { font-size: 14px; }
      .price-period { font-size: 12px; }
      .price-description { font-size: 15px; }
    }
    @media (max-width: 800px) {
      .studio-head { flex-direction: column; align-items: flex-start; gap: 25px; }
      .studio-side { max-width: 490px; }
      .studio-side .sub { max-width: 100%; }
      .studio-features { grid-template-columns: 1fr; gap: 28px; }
      .studio-feature { position: relative; padding-left: 39px; }
      .studio-feature p { max-width: 100%; }
      .brand-layout { grid-template-columns: 1fr; gap: 42px; }
      .brand-copy > .sub { max-width: 520px; }
      .brand-demo { max-width: 620px; width: 100%; }
      .specimen-voice { flex-direction: row; align-items: center; }
      .gallery-head-right { max-width: 280px; }
      .tool-head { flex-direction: column; gap: 25px; }
      .tool-head > .sub { max-width: 500px; }
      .price-grid { grid-template-columns: 1fr; gap: 18px; border: 0; overflow: visible; }
      .price-card, .price-card + .price-card { border: 1px solid var(--line); border-radius: var(--radius-surface); padding: 30px; }
      .price-description { min-height: 0; max-width: none; font-size: 16px; }
      .price-card li { font-size: 15px; }
      .price-period { font-size: 14px; }
      .faq-layout { grid-template-columns: 1fr; gap: 32px; }
      .faq-copy .sub { max-width: 490px; }
      .share-bubble { max-width: 100%; }
    }
    @media (max-width: 620px) {
      :root { --text-lead: 18px; --text-body: 16px; --text-detail: 14px; --text-label: 11px; }
      .nav { height: 72px; gap: 12px; }
      .nav-links { top: 72px; }
      .nav .btn { font-size: 13px; min-height: 42px; padding-inline: 15px; }
      .hero-copy .sub { max-width: 390px; }
      .hero-actions { align-items: flex-start; gap: 15px 22px; }
      .hero-actions .text-link { align-self: center; }
      .hero-note { font-size: 13px; }
      .hero-bottom { gap: 18px; }
      .hero-bottom > p { font-size: 14px; white-space: normal; }
      .format-links { justify-content: flex-start; gap: 15px 22px; }
      .format-links a { font-size: 13px; }
      .section-label { align-items: flex-start; gap: 20px; }
      .section-label > span { max-width: 52%; }
      .section-label > span:last-child { font-size: 10px; max-width: 43%; }
      .studio-feature h3, .platform-item h3 { font-size: 18px; }
      .brand-step h3 { font-size: 16px; }
      .brand-demo { padding: 22px; }
      .brand-tabs button { font-size: 12px; padding: 11px 6px; }
      .specimen-voice { flex-direction: column; align-items: flex-start; }
      .specimen-type small { font-size: 11px; }
      .gallery-head-right { max-width: none; gap: 20px; }
      .gallery-head-right .sub { max-width: 100%; }
      .gallery-foot { align-items: flex-start; gap: 15px; }
      .gallery-foot > span { font-size: 14px; }
      .tool-text p, .platform-item p, .studio-feature p { font-size: 16px; }
      .tool-text { padding: 27px 23px; gap: 16px; }
       .compare-label { font-size: 11px; }
      .platform-grid { gap: 32px 25px; }
      .platform-item > .text-link { font-size: 13px; gap: 12px; }
      .engine-strip > span { font-size: 14px; }
      .share-bubble { width: 265px; }
      .price-card, .price-card + .price-card { padding: 28px; }
      .price-period { font-size: 14px; }
      .faq-item summary { font-size: 16px; }
      .faq-item p { font-size: 16px; line-height: 1.75; }
      .cta-buttons { gap: 18px 22px; }
      .cta-bottom > p { font-size: 14px; }
      .footer-links { min-width: 0; gap: 30px 22px; }
      .footer-links h3, .footer-links a { font-size: 14px; }
      .footer-brand > p { font-size: 15px; }
      .footer-bottom { font-size: 11px; flex-wrap: wrap; gap: 15px; }
    }
    @media (max-width: 380px) {
      .nav .logo { width: 125px; }
      .nav { gap: 8px; }
      .nav-end { gap: 8px; }
      .nav .btn { padding-inline: 12px; }
      .nav .btn .arrow { display: none; }
      .menu-toggle { width: 32px; }
      .brand-demo { padding: 17px; }
      .brand-tabs button { padding-inline: 4px; }
      .platform-grid { grid-template-columns: 1fr; }
      .footer-links { grid-template-columns: 1fr 1fr; }
    }

    .hero-art .type-card strong { letter-spacing: -.02em; }

    /* Each selection follows its own card; the portrait is selected by default. */
    .portrait-card { overflow: visible; border-radius: 0; }
    .portrait-content { position: absolute; inset: 0; overflow: hidden; border-radius: 0; }
    .hero-art .selection-frame {
      inset: 0; width: auto; height: auto; transform: none; z-index: 3;
      border: 1px solid #0d6efd; border-radius: 0; opacity: 0;
    }
    .hero-art .portrait-card > .selection-frame { opacity: 1; }
    @media (hover: hover) {
      .hero-art:has(> .type-card:hover, > .art-tile:hover) .portrait-card > .selection-frame { opacity: 0; }
      .hero-art .type-card:hover > .selection-frame,
      .hero-art .art-tile:hover > .selection-frame { opacity: 1; }
    }
    .hero-art .selection-frame i {
      width: 8px; height: 8px; border: 1px solid #0d6efd;
      border-radius: 0; background: #fff;
    }
    .hero-art .selection-frame i:nth-child(1) { top: -5px; left: -5px; }
    .hero-art .selection-frame i:nth-child(2) { top: -5px; right: -5px; }
    .hero-art .selection-frame i:nth-child(3) { bottom: -5px; left: -5px; }
    .hero-art .selection-frame i:nth-child(4) { bottom: -5px; right: -5px; }
    .collab-cursor {
      position: absolute; z-index: 5; pointer-events: none; width: max-content;
      font: 500 12px/1.2 Inter, Arial, sans-serif; letter-spacing: 0;
      filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--neutral-900) 7.059%, transparent));
    }
    .collab-cursor svg {
      display: block; width: 25px; height: 30px;
      fill: var(--cursor-color); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round;
    }
    .collab-cursor span {
      display: block; margin: -2px 0 0 17px; padding: 8px 12px;
      border-radius: 0 6px 6px 6px; background: var(--cursor-color); color: #fff;
    }
    .collab-cursor-sarah { --cursor-color: #7755df; left: 62px; bottom: 98px; }
    .collab-cursor-robert { --cursor-color: #f0c343; left: 408px; top: 118px; }
    .collab-cursor-robert span { color: var(--neutral-950); }
    @media (prefers-reduced-motion: no-preference) {
      .collab-cursor-sarah { animation: sarah-cursor-drift 14s ease-in-out infinite; }
      .collab-cursor-robert { animation: robert-cursor-drift 18s ease-in-out -4s infinite; }
    }
    @keyframes sarah-cursor-drift {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(16px, -13px); }
      50% { transform: translate(7px, -27px); }
      75% { transform: translate(-9px, -10px); }
    }
    @keyframes robert-cursor-drift {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(-17px, 13px); }
      50% { transform: translate(-8px, 30px); }
      75% { transform: translate(7px, 16px); }
    }
    @media (max-width: 620px) {
      .collab-cursor { font-size: 10px; }
      .collab-cursor svg { width: 21px; height: 25px; }
      .collab-cursor span { margin-left: 14px; padding: 7px 9px; }
      .collab-cursor-sarah { left: 33px; bottom: 55px; }
      .collab-cursor-robert { left: 250px; top: 95px; }
      .hero-art .selection-frame i { width: 6px; height: 6px; }
      .hero-art .selection-frame i:nth-child(1) { top: -4px; left: -4px; }
      .hero-art .selection-frame i:nth-child(2) { top: -4px; right: -4px; }
      .hero-art .selection-frame i:nth-child(3) { bottom: -4px; left: -4px; }
      .hero-art .selection-frame i:nth-child(4) { bottom: -4px; right: -4px; }
    }

    /* A quiet, continuous ribbon of the AI brands featured in the suite, on a
       dark band between the editorial hero and the prompt. */
    .brand-band { background: var(--dark); color: #fff; }
    .hero-brands {
      display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px;
      align-items: center; gap: 32px; padding-block: 28px;
    }
    .hero-brands-label { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-secondary-dark); }
    .brand-marquee {
      min-width: 0; overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    .brand-marquee-track { display: flex; width: max-content; }
    .brand-marquee-group {
      display: flex; align-items: center; flex: none; gap: 76px;
      list-style: none; padding: 0 76px 0 0; margin: 0;
    }
    .brand-marquee-logo {
      --brand-logo-scale: .9;
      display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--brand-logo-scale));
      width: 170px; height: 40px; flex: none; opacity: .8;
    }
    .brand-marquee-logo--kling { --brand-logo-scale: .8; }
    .brand-marquee-logo .brand-mark { width: calc(32px * var(--brand-logo-scale)); height: calc(32px * var(--brand-logo-scale)); object-fit: contain; }
    .brand-marquee-logo .brand-wordmark { width: auto; height: calc(25px * var(--brand-logo-scale)); max-width: calc(128px * var(--brand-logo-scale)); }
    .brand-marquee-logo .brand-wordmark-bytedance { height: calc(23px * var(--brand-logo-scale)); }
    .brand-marquee-logo .brand-wordmark-kling { height: calc(28px * var(--brand-logo-scale)); }
    /* The marks are single-colour artwork drawn in black. */
    .brand-marquee-logo img { filter: invert(1); }
    .brand-marquee-logo .brand-name { font: 600 calc(20px * var(--brand-logo-scale))/1 Inter, Arial, sans-serif; letter-spacing: -.045em; white-space: nowrap; }
    .brand-marquee-toggle {
      display: grid; place-items: center; width: 40px; height: 40px;
      border: 1px solid var(--neutral-700); border-radius: var(--radius-round); background: transparent;
      transition: background .2s, border-color .2s;
    }
    .brand-marquee-toggle:hover { background: var(--neutral-850); border-color: var(--neutral-400); }
    .brand-marquee-toggle[hidden] { display: none; }
    .brand-marquee-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
    .brand-marquee-toggle .play-icon { display: none; }
    .hero-brands[data-paused="true"] .pause-icon { display: none; }
    .hero-brands[data-paused="true"] .play-icon { display: block; }
    @media (prefers-reduced-motion: no-preference) {
      .hero-brands[data-ready="true"] .brand-marquee-track { animation: brand-drift 64s linear infinite; }
      .brand-marquee:hover .brand-marquee-track,
      .hero-brands[data-paused="true"] .brand-marquee-track,
      .hero-brands[data-offscreen="true"] .brand-marquee-track { animation-play-state: paused; }
    }
    @keyframes brand-drift { to { transform: translateX(-50%); } }
    @media (max-width: 800px) {
      .hero-brands { grid-template-columns: 126px minmax(0, 1fr) 36px; gap: 20px; }
      .brand-marquee-toggle { width: 36px; height: 36px; }
      .brand-marquee-group { gap: 52px; padding-right: 52px; }
    }
    @media (max-width: 620px) {
      .hero-brands { grid-template-columns: minmax(0, 1fr) 36px; gap: 18px 14px; padding-block: 20px 25px; }
      .hero-brands-label { grid-column: 1; grid-row: 1; }
      .brand-marquee-toggle { grid-column: 2; grid-row: 1; }
      .brand-marquee { grid-column: 1 / -1; grid-row: 2; }
      .brand-marquee-logo { width: 160px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-brands { grid-template-columns: 150px minmax(0, 1fr); }
      .brand-marquee { mask-image: none; -webkit-mask-image: none; }
      .brand-marquee-track { width: 100%; }
      .brand-marquee-group { flex: 1; flex-wrap: wrap; justify-content: space-around; gap: 24px; padding: 0; }
      .brand-marquee [aria-hidden="true"], .brand-marquee-toggle { display: none; }
    }
    @media (prefers-reduced-motion: reduce) and (max-width: 620px) {
      .hero-brands { grid-template-columns: minmax(0, 1fr); }
      .brand-marquee-group { justify-content: flex-start; gap: 20px 12px; }
      .brand-marquee-logo { width: calc(50% - 6px); gap: calc(7px * var(--brand-logo-scale)); }
      .brand-marquee-logo .brand-mark { width: calc(25px * var(--brand-logo-scale)); height: calc(25px * var(--brand-logo-scale)); }
      .brand-marquee-logo .brand-wordmark { height: calc(20px * var(--brand-logo-scale)); max-width: calc(95px * var(--brand-logo-scale)); }
      .brand-marquee-logo .brand-name { font-size: calc(16px * var(--brand-logo-scale)); }
    }

    /* Three editorial headlines share one fixed space; only the lettering moves. */
    .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero-copy { min-width: 0; }
    .hero h1.rotating-title {
      display: grid; isolation: isolate; line-height: .96;
      padding-bottom: 0;
    }
    .hero h1 .hero-title-slide {
      display: grid; grid-template-rows: .96em .96em;
      grid-area: 1 / 1; min-width: 0; align-self: start;
      opacity: 0; visibility: hidden; transform: translateY(.1em);
      transition: opacity .28s ease, transform .55s var(--ease), visibility 0s .55s;
    }
    .hero h1 .hero-title-slide.is-active {
      opacity: 1; visibility: visible; transform: translateY(0);
      transition: opacity .4s ease, transform .65s var(--ease), visibility 0s;
    }
    .hero h1 .hero-title-slide.is-leaving { transform: translateY(-.08em); }
    .hero h1 .last-word { white-space: nowrap; padding-bottom: 0; line-height: .96; }
    .hero h1 [data-hero-title="edit"] .last-word,
    .hero h1 [data-hero-title="intelligence"] .last-word { font-size: .9em; line-height: 1.0666667; }
    @media (prefers-reduced-motion: reduce) {
      .hero h1 .hero-title-slide { transform: none; }
    }

    /* The hero and the engine band share the first screen: the hero takes what the
       band leaves, so the band rests on the bottom edge until the page scrolls. */
    .first-screen { --header-h: 83px; display: flex; flex-direction: column; min-height: min(calc(100svh - var(--header-h)), 1180px); }
    .first-screen .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
    .first-screen .hero > .shell { width: 100%; }
    /* The copy sits a little above the artwork's centre line; stacked on a phone, it doesn't shift. */
    .first-screen .hero-copy { top: -36px; }
    @media (max-width: 800px) { .first-screen { --header-h: 73px; } .first-screen .hero-copy { top: -24px; } }
    @media (max-width: 620px) { .first-screen { --header-h: 67px; } .first-screen .hero-copy { top: 0; } }

    /* The studio sits inside an abstract, glassy space while its editor settles from isometric to flat. */
    .studio-section, .feature-showcase, .share-section {
      position: relative; isolation: isolate; overflow: hidden;
      background: var(--neutral-975) url('../studio/abstract-studio.svg') center / cover no-repeat;
    }
    .studio-section::before, .feature-showcase::before, .share-section::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
      background:
        radial-gradient(ellipse at 50% 35%, transparent 0 28%, color-mix(in srgb, var(--neutral-1000) 66.667%, transparent) 82%),
        linear-gradient(180deg, color-mix(in srgb, var(--neutral-1000) 66.667%, transparent), transparent 30%, color-mix(in srgb, var(--neutral-1000) 66.667%, transparent));
    }
    .studio-section > .shell, .feature-showcase > .shell, .share-section > .shell, .footer > .shell { position: relative; z-index: 1; }
    /* Natural sculptural artwork gives the studio a softer, brighter atmosphere. */
    .studio-section {
      background: var(--neutral-600) url('../studio/organic-studio-v2.jpg') center / cover no-repeat;
    }
    .studio-section::before {
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--neutral-950) 81.176%, transparent) 0%, #171d2db8 20%, #20273794 40%,
        #25304338 65%, color-mix(in srgb, var(--neutral-950) 27.059%, transparent) 78%, color-mix(in srgb, var(--neutral-925) 75.294%, transparent) 100%);
    }
    .studio-section .studio-side .sub, .studio-section .studio-feature p { color: var(--neutral-100); }
    .studio-section .studio-feature .n { color: var(--neutral-250); }
    .studio-section .section-label { border-bottom-color: #ffffff2e; }
    .editor-stage {
      --studio-progress: 0; --studio-tilt-x: 8deg; --studio-tilt-y: -10deg;
      --studio-tilt-z: 1deg; --studio-scale: .96;
      --studio-hover-x: 0deg; --studio-hover-y: 0deg;
      position: relative; overflow: visible; perspective: 1800px; transform-style: preserve-3d;
      padding: 28px 0 0;
      background: transparent; border: 0; border-radius: 0; box-shadow: none;
    }
    .editor-stage::before, .editor-stage::after { display: none; }
    .editor-stage img {
      position: relative; z-index: 1; transform-origin: center 72%;
      transform: perspective(1800px)
        rotateX(calc(var(--studio-tilt-x) + var(--studio-hover-x)))
        rotateY(calc(var(--studio-tilt-y) + var(--studio-hover-y)))
        rotateZ(var(--studio-tilt-z)) scale(var(--studio-scale));
      box-shadow: 0 28px 80px color-mix(in srgb, var(--neutral-1000) 60%, transparent), 0 0 0 1px #ffffff18;
      border-radius: var(--radius-surface);
      transition: transform .45s cubic-bezier(.2,.65,.3,1), box-shadow .45s ease;
    }
    .editor-stage.is-pointer-active img { transition-duration: .18s, .45s; }
    .editor-stage.is-settled { animation: studio-float 8s ease-in-out infinite; }
    .editor-stage.is-pointer-active { animation-play-state: paused; }
    @keyframes studio-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .studio-section .studio-features { position: relative; }
    .studio-section .studio-feature { border-top-color: #ffffff2e; }
    @media (prefers-reduced-motion: reduce) {
      .editor-stage { --studio-progress: 1; --studio-tilt-x: 0deg; --studio-tilt-y: 0deg; --studio-tilt-z: 0deg; --studio-scale: 1; }
      .editor-stage.is-settled { animation: none; }
      .editor-stage img { transition: none; }
      .editor-stage::after { display: none; }
    }
    @media (max-width: 800px) {
      .editor-stage { padding: 28px 0 0; }
      .editor-stage img { transform-origin: center 72%; }
    }
    @media (max-width: 620px) {
      .editor-stage { margin-inline: -8px; padding: 24px 0 0; }
    }

    /* Keep the editor tools as two equal, calm cards at every breakpoint. */
    .tools-grid { align-items: stretch; }
    .tool-card { display: flex; flex-direction: column; min-width: 0; }
    .tool-card .tool-visual { flex: 0 0 auto; }
    .tool-card .tool-text { flex: 1 1 auto; min-height: 176px; }
    /* descriptions run the card's width (beside the arrow), so each fits in two lines */
    .tool-card .tool-text > div { flex: 1; min-width: 0; }
    .tool-card .tool-text p { max-width: 560px; }
    .tool-text h3 { font-family: Garet, sans-serif; font-weight: 500; letter-spacing: -.045em; }
    .mockup-visual { --split: 50%; }
    .compare-divider::after { content: '↔'; }
    .studio-feature .icon {
      display: block; width: 29px; height: 29px; margin: 0 0 25px;
      fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
    }
    @media (max-width: 800px) {
      .studio-feature .icon { position: absolute; left: 0; top: 23px; width: 25px; height: 25px; margin: 0; }
    }
    @media (max-width: 620px) {
      .tool-card .tool-text { min-height: 0; }
    }
    /* Keep every gallery image and caption on the same visual grid. */
    #gallery-toggle[hidden], #gallery-toggle .gallery-play-icon { display: none; }
    #gallery-toggle[aria-pressed="true"] .gallery-play-icon { display: block; }
    #gallery-toggle[aria-pressed="true"] .gallery-pause-icon { display: none; }
    .work-card a { aspect-ratio: 1; }
    .work-card img { height: 100%; aspect-ratio: auto; }
    .work-card figcaption {
      display: grid; grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline; column-gap: 18px; min-height: 44px;
    }
    .work-card figcaption span { text-align: right; }
    /* the proof under each design: how it was made, and what it opens as */
    .work-card figcaption .work-meta {
      grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin-top: 4px;
      text-align: left; font-variant-numeric: tabular-nums; line-height: 1.6;
    }
    .work-card .work-meta > span { text-align: left; }
    .work-card .work-meta > span + span::before { content: "·"; margin: 0 8px; }
    @media (max-width: 620px) {
      .work-card figcaption { min-height: 40px; column-gap: 12px; }
    }
    .section-ruler {
      position: relative; width: 100%; height: 34px; overflow: hidden;
      color: var(--text-secondary-light);
    }
    .section-ruler::before, .section-ruler::after {
      content: ''; position: absolute; inset: 0; width: 100%;
      pointer-events: none;
    }
    .section-ruler::before {
      height: 10px;
      background: repeating-linear-gradient(90deg, var(--neutral-300) 0 1px, transparent 1px 16px);
    }
    .section-ruler::after {
      height: 18px;
      background: repeating-linear-gradient(90deg, var(--neutral-400) 0 1px, transparent 1px 80px);
    }
    .section-ruler .ruler-line {
      position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--neutral-300);
    }
    .ruler-labels {
      position: absolute; inset: auto 0 3px; display: flex; justify-content: space-between;
      padding-inline: 2px; font: 9px/1 Inter, Arial, sans-serif;
      letter-spacing: .08em; color: var(--text-secondary-light);
    }
    /* Feel your brand: the blank → branded slider from the tools section, at full
       size on the lime band, with the brand kit it applied floating beside it. */
    .mock-section { background: var(--lime); padding: 96px 0; overflow: hidden; }
    .mock-layout {
      display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      gap: 70px; align-items: center;
    }
    .mock-copy .display {
      font-family: Garet, Arial, sans-serif; font-size: clamp(42px, 4.8vw, 68px);
      line-height: 1.03; letter-spacing: -.065em;
    }
    .mock-copy .sub { max-width: 400px; margin: 25px 0 30px; color: var(--neutral-800); }
    .mock-steps {
      list-style: none; margin: 0 0 34px; padding: 0; max-width: 400px;
      border-top: 1px solid color-mix(in srgb, var(--neutral-900) 14%, transparent);
    }
    .mock-steps li {
      display: flex; align-items: baseline; gap: 20px; padding: 14px 0;
      border-bottom: 1px solid color-mix(in srgb, var(--neutral-900) 14%, transparent);
      font-size: 15px; line-height: 1.4;
    }
    .mock-steps b {
      flex: 0 0 22px; font: 500 11px/1 Inter, Arial, sans-serif; letter-spacing: .1em;
      font-variant-numeric: tabular-nums; color: var(--neutral-700);
    }
    .mock-art { position: relative; min-width: 0; }
    .mock-compare {
      position: relative; overflow: hidden; aspect-ratio: 5 / 4;
      border-radius: var(--radius-surface);
      box-shadow: 0 30px 60px color-mix(in srgb, #3d4721 18%, transparent);
    }
    .mock-compare .compare-label { top: 26px; font-size: 13px; padding: 9px 14px; }
    .mock-compare .compare-label.before { left: 26px; }
    .mock-compare .compare-label.after { right: 26px; }
    .mock-kit {
      position: absolute; left: -28px; bottom: 36px; z-index: 5; pointer-events: none;
      display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
      background: var(--paper); border-radius: var(--radius-surface);
      box-shadow: 0 14px 34px color-mix(in srgb, #3d4721 16%, transparent);
    }
    .mock-kit-swatches { display: flex; }
    .mock-kit-swatches i {
      width: 26px; height: 26px; border-radius: var(--radius-round);
      border: 2px solid var(--paper); background: #3a1430;
    }
    .mock-kit-swatches i + i { margin-left: -9px; }
    .mock-kit-swatches i:nth-child(2) { background: #c49a82; }
    .mock-kit-swatches i:nth-child(3) { background: #ece0d8; }
    .mock-kit strong { display: block; font: 400 17px/1.1 Georgia, serif; letter-spacing: .02em; }
    .mock-kit small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
    @media (max-width: 800px) {
      .mock-section { padding: 72px 0; }
      .mock-layout { grid-template-columns: 1fr; gap: 40px; }
      .mock-copy .sub, .mock-steps { max-width: 520px; }
      .mock-art { max-width: 680px; width: 100%; margin: auto; }
      .mock-kit { left: 16px; bottom: 16px; }
    }
    @media (max-width: 620px) {
      .mock-section { padding: 56px 0; }
      .mock-copy .display { font-size: 43px; }
      .mock-steps li { font-size: 14px; gap: 16px; }
      .mock-compare { aspect-ratio: 1; }
      .mock-compare .compare-label { top: 16px; font-size: 11px; padding: 7px 11px; }
      .mock-compare .compare-label.before { left: 14px; }
      .mock-compare .compare-label.after { right: 14px; }
      .mock-kit { left: 12px; bottom: 12px; gap: 10px; padding: 9px 13px 9px 9px; }
      .mock-kit-swatches i { width: 20px; height: 20px; }
      .mock-kit strong { font-size: 14px; }
      .mock-kit small { font-size: 10px; }
    }
    .platform-item-media {
      width: 100%; aspect-ratio: 1.5; overflow: hidden; margin: 0 0 18px;
      border: 0; border-radius: 0; background: var(--neutral-100);
    }
    .platform-item-media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .6s var(--ease); 
    }
    .platform-item:hover .platform-item-media img { transform: scale(1.035); }
    .platform-item p {
      min-height: 3.3em; font-size: 15px; line-height: 1.65; letter-spacing: -.01em;
    }
    @media (max-width: 800px) {
      .platform-item p { font-size: 14px; }
    }
    @media (max-width: 620px) {
      .platform-item-media { aspect-ratio: 1.45; margin-bottom: 15px; }
      .platform-item p { min-height: 0; font-size: 12px; }
    }

/* Pill-shaped website entry for the guest brandbook flow. */
.brandbook-benefits { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 12px; }
.brandbook-benefits li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.6; }
.brandbook-benefits .minimal-check { flex-shrink: 0; }
.brandbook-entry { max-width: 560px; }
.brandbook-entry > label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; }
.brandbook-entry-row { display: flex; align-items: center; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--neutral-300); border-radius: var(--radius-pill); }
.brandbook-entry-row:focus-within { border-color: var(--neutral-950); box-shadow: 0 0 0 1px var(--neutral-950); }
.brandbook-website-field { position: relative; flex: 1; min-width: 0; background: #fff; border-radius: var(--radius-pill); }
.brandbook-website-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 1; width: 20px; height: 20px; fill: none; stroke: var(--neutral-600); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.brandbook-entry-row input { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px 10px 46px; background: #fff; border: 0; border-radius: var(--radius-pill); outline-offset: 0; font-size: 15px; color: var(--neutral-950); }
.brandbook-entry-row input:is(:autofill, :-webkit-autofill) { box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--neutral-950); caret-color: var(--neutral-950); }
.brandbook-entry-row input::placeholder { color: var(--text-secondary-light); }
.brandbook-entry-row input:focus-visible { outline: none; }
.brandbook-entry-row .btn { min-height: 46px; padding: 12px 18px; gap: 12px; font-size: 13px; flex-shrink: 0; white-space: nowrap; }
.brandbook-entry-row .btn:hover { transform: none; }
.brandbook-entry > p { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--text-secondary-light); }
.brandbook-entry > .brandbook-entry-error { color: #9c3030; }
.brandbook-entry [hidden] { display: none; }
@media (max-width: 620px) {
  .brandbook-benefits { margin: 22px 0 26px; gap: 10px; }
  .brandbook-benefits li { font-size: 13px; }
  .brandbook-entry-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; background: transparent; border: 0; }
  .brandbook-entry-row:focus-within { box-shadow: none; }
  .brandbook-website-field { border: 1px solid var(--neutral-300); }
  .brandbook-website-field:focus-within { border-color: var(--neutral-950); box-shadow: 0 0 0 1px var(--neutral-950); }
  .brandbook-entry-row input { min-height: 52px; }
  .brandbook-entry-row .btn { justify-content: space-between; }
}

/* After the editorial hero and the engine ribbon, the product's own starting
   point: a headline and the prompt that begins a design. */
.prompt-hero-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: clamp(72px, 8.5vw, 124px); text-align: center;
}
.prompt-hero-inner > h2 {
  font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; letter-spacing: -.055em;
  text-wrap: balance;
  margin: 0 0 clamp(24px, 2.6vw, 36px);
}
.prompt-box-wrap { position: relative; width: min(760px, 100%); border-radius: var(--radius-modal); }
.prompt-box {
  position: relative; padding: 16px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: inherit;
  box-shadow: 0 24px 60px -20px rgb(39 28 58 / 18%), 0 8px 24px -12px rgb(39 28 58 / 12%), 0 2px 6px rgb(39 28 58 / 3%);
  transition: box-shadow .25s;
}
.prompt-box:focus-within {
  box-shadow: 0 28px 64px -20px rgb(39 28 58 / 22%), 0 10px 28px -12px rgb(39 28 58 / 15%), 0 2px 6px rgb(39 28 58 / 3%);
}
.prompt-box-editor { position: relative; }
.prompt-box textarea, .prompt-box-hint { font: 400 17px/1.6 Inter, Arial, sans-serif; letter-spacing: -.01em; }
/* One fixed height of exactly four lines: longer prompts scroll inside, behind a slim scrollbar. */
.prompt-box textarea {
  display: block; width: 100%; height: calc(4 * 1.6em + 4px); margin-bottom: 14px; resize: none; overflow-y: auto;
  padding: 4px 8px 0 2px; border: 0; background: transparent; color: var(--ink);
}
.prompt-box textarea::-webkit-scrollbar { width: 4px; }
.prompt-box textarea::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-pill); }
.prompt-box textarea::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
@supports not selector(::-webkit-scrollbar) {
  .prompt-box textarea { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
}
.prompt-box textarea:focus-visible { outline: none; }
/* Typed examples stand in for the placeholder while the field is empty and idle. */
.prompt-box-hint {
  position: absolute; top: 4px; left: 2px; right: 8px; pointer-events: none;
  color: var(--text-secondary-light); white-space: pre-wrap; overflow-wrap: anywhere;
}
.prompt-box textarea:focus + .prompt-box-hint,
.prompt-box textarea:not(:placeholder-shown) + .prompt-box-hint { display: none; }
.prompt-box-caret {
  display: inline-block; width: 1px; height: 1.05em; margin-left: 2px;
  vertical-align: -.12em; background: currentColor;
}
.prompt-box-footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.prompt-box [hidden] { display: none; }
/* The workspace composer's own controls: reference files, brand kit and size. */
.prompt-box-tools { display: flex; align-items: center; flex-wrap: wrap; flex: 1; gap: 6px; min-width: 0; }
.prompt-box-tools svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.prompt-tool-add {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: transparent;
  border-radius: var(--radius-round); color: var(--text-secondary-light); transition: background .15s, color .15s;
}
.prompt-tool-add svg { width: 20px; height: 20px; }
.prompt-tool-add:hover { background: var(--button-neutral-hover); color: var(--ink); }
.prompt-tool-select {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 220px; padding: 0 12px;
  background: var(--button-neutral-bg); border-radius: var(--radius-pill);
  font-size: 13px; color: var(--text-secondary-light); transition: background .15s, color .15s;
}
.prompt-tool-select > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prompt-tool-select:is(:hover, [aria-expanded="true"]) { background: var(--button-neutral-hover); color: var(--ink); }
.prompt-tool-select .prompt-tool-chevron { width: 12px; height: 12px; transition: transform .15s; }
.prompt-tool-select[aria-expanded="true"] .prompt-tool-chevron { transform: rotate(180deg); }
.prompt-format-trigger { color: var(--ink); }
.prompt-refs { padding: 0 4px 14px; }
.prompt-refs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prompt-refs li {
  display: flex; align-items: center; gap: 9px; min-width: 0; width: min(235px, 100%); padding: 7px 8px 7px 7px;
  background: var(--button-neutral-bg); border: 1px solid var(--line); border-radius: var(--radius-surface);
}
.prompt-ref-thumb {
  display: grid; place-items: center; flex: none; width: 38px; height: 42px; overflow: hidden;
  background: var(--button-neutral-hover); border-radius: 6px; font-size: 9px; font-weight: 600;
}
.prompt-ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prompt-ref-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-size: 12px; line-height: 1.2; }
.prompt-ref-info > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prompt-ref-info small { font-size: 10px; color: var(--text-secondary-light); }
.prompt-refs li button {
  display: grid; place-items: center; flex: none; width: 25px; height: 25px; background: transparent;
  border-radius: var(--radius-round); color: var(--text-secondary-light);
}
.prompt-refs li button:hover { background: var(--button-neutral-hover); color: var(--ink); }
.prompt-refs li button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.prompt-refs > p, .prompt-refs-error { font-size: 12px; line-height: 1.5; color: var(--text-secondary-light); }
.prompt-refs > p { margin-top: 9px; }
.prompt-refs-error { margin: 0 4px 12px; }
.prompt-box-send {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--radius-round); background: var(--button-primary-bg);
  color: var(--button-primary-ink); transition: background .2s;
}
.prompt-box-send:hover { background: var(--button-primary-hover); }
.prompt-box-send:disabled { background: var(--button-neutral-bg); color: var(--neutral-400); }
.prompt-box-send svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.prompt-box :is(.prompt-tool-add, .prompt-tool-select, .prompt-box-send):focus-visible { outline-offset: 2px; }
/* The workspace composer's flowing outline, so the prompt reads as the same control. */
@property --prompt-line-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.prompt-box-line {
  position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--prompt-line-angle), #9c6de0, #4bb9cf, #e489b3, #9c6de0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.prompt-box-note { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--text-secondary-light); }
@media (prefers-reduced-motion: no-preference) {
  .prompt-box-caret { animation: prompt-caret 1s step-end infinite; }
  .prompt-box-line { animation: prompt-line-flow 6s linear infinite; }
  .prompt-box-wrap[data-paused="true"] :is(.prompt-box-line, .prompt-box-caret) { animation-play-state: paused; }
}
@keyframes prompt-caret { 50% { opacity: 0; } }
@keyframes prompt-line-flow { to { --prompt-line-angle: 360deg; } }
@media (max-width: 620px) {
  .prompt-hero-inner { padding-block: 56px 60px; }
  .prompt-hero-inner > h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .prompt-box { padding: 13px; }
  .prompt-box textarea, .prompt-box-hint { font-size: 16px; }
  .prompt-tool-select { max-width: 170px; padding-inline: 11px; font-size: 12px; }
  .prompt-box-note { font-size: 13px; }
}

/* Starting points under the prompt: a row of use cases that drifts on its own, loops
   without an end and can be stepped or slid by hand. Each card fills the prompt with a
   detailed example brief; the format stays automatic. The little
   scenes are drawn from four roles — paper, ink, faint ink lines and the card's accent. */
.idea-rail { width: 100%; margin-top: clamp(40px, 4.4vw, 60px); text-align: left; }
.idea-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.idea-rail-head p { font-size: 15px; font-weight: 500; line-height: 1.5; }
.idea-rail-nav { display: flex; gap: 8px; }
.idea-track {
  display: flex; gap: 14px; margin: 0; padding: 0 0 4px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
}
.idea-track::-webkit-scrollbar { display: none; }
.idea-track[data-dragging="true"] { cursor: grabbing; user-select: none; }
.idea-track li { flex: none; }
.idea-card { display: flex; flex-direction: column; gap: 11px; width: 196px; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.idea-art { display: block; position: relative; aspect-ratio: 10 / 7; overflow: hidden; background: var(--idea-bg); border-radius: var(--radius-surface); }
.idea-art img { position: absolute; inset: 14px; margin: auto; display: block; max-width: calc(100% - 28px); max-height: calc(100% - 28px); width: auto; height: auto; border-radius: 5px; box-shadow: 0 6px 16px rgb(25 21 31 / 16%); }
.idea-name { font-size: 14px; font-weight: 500; line-height: 1.4; }
.idea-card:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .idea-art img { transition: transform .5s var(--ease); }
  .idea-card:hover .idea-art img { transform: scale(1.05); }
}
@media (max-width: 620px) {
  .idea-rail { margin-top: 36px; }
  .idea-track { gap: 12px; }
  .idea-card { width: 160px; }
}

/* Select size: the workspace composer's format picker, on the site's surfaces. */
.size-picker {
  width: min(780px, calc(100vw - 40px)); height: min(680px, calc(100dvh - 40px)); padding: 0;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-modal);
  font-size: 14px; line-height: 1.4; text-align: left; overflow: hidden;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--neutral-975) 22%, transparent);
}
.size-picker[open] { display: flex; flex-direction: column; }
.size-picker::backdrop { background: color-mix(in srgb, var(--neutral-950) 50%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.size-picker button { background: transparent; }
.size-picker svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-header { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 18px 22px; border-bottom: 1px solid var(--line); }
/* The workspace picker's own heading: its display face at 18px, no margin. */
.sp-header h2 { margin: 0; font: 500 18px/1.3 Garet, Arial, sans-serif; letter-spacing: -.02em; text-wrap: nowrap; }
.sp-close { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-round); color: var(--text-secondary-light); }
.sp-close svg { width: 16px; height: 16px; }
.sp-close:hover { background: var(--button-neutral-hover); color: var(--ink); }
.sp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sp-categories, .sp-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sp-categories { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 16px 22px; border-right: 1px solid var(--line); }
.sp-categories button {
  display: flex; align-items: center; gap: 12px; flex: none; width: 100%; min-height: 46px; padding: 12px;
  border-radius: var(--radius-surface); text-align: left; font-size: 14px; line-height: 20px;
}
.sp-categories svg { width: 18px; height: 18px; margin: 1px; }
.sp-categories svg.sp-logo { stroke: none; }
/* Snapchat's yellow ghost needs its outline to read on a light surface. */
.sp-categories svg.sp-logo--snapchat path { stroke: var(--neutral-900); stroke-width: 1.2; paint-order: stroke; }
.sp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; padding: 16px 22px 0 20px; }
.sp-search {
  display: flex; align-items: center; gap: 12px; flex: none; min-height: 48px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--radius-modal-surface); color: var(--text-secondary-light);
}
.sp-search:focus-within { border-color: var(--neutral-950); }
.sp-search svg { width: 18px; height: 18px; }
.sp-search input { flex: 1; min-width: 0; height: 44px; padding: 0; background: transparent; border: 0; outline: none; font-size: 15px; color: var(--ink); }
.sp-search input::-webkit-search-cancel-button { cursor: pointer; }
.sp-results { flex: 1; padding: 2px 4px 14px 2px; }
.sp-options { display: flex; flex-direction: column; gap: 5px; }
.sp-ratios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.sp-option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 11px 12px;
  border-radius: var(--radius-surface); text-align: left; font-size: 14px;
}
.sp-option svg { width: 22px; height: 22px; color: var(--text-secondary-light); }
.sp-option-name { min-width: 0; overflow-wrap: anywhere; }
.sp-option-name::first-letter { text-transform: uppercase; }
.sp-option-name small { display: block; margin-top: 3px; font-size: 11px; color: var(--text-secondary-light); }
.sp-dimensions { flex: none; margin-left: auto; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary-light); }
.sp-categories button:hover, .sp-option:hover { background: var(--button-neutral-bg); }
.sp-categories button[aria-pressed="true"], .sp-option[aria-pressed="true"] { background: var(--button-neutral-hover); }
.sp-note { padding: 8px 12px; font-size: 12px; line-height: 1.6; color: var(--text-secondary-light); }
.sp-custom { padding: 12px; }
.sp-custom h3 { margin: 0; font: 500 18px/1.3 Garet, Arial, sans-serif; }
.sp-custom p { margin: 10px 0 24px; font-size: 13px; color: var(--text-secondary-light); }
.sp-custom-fields { display: flex; gap: 14px; }
.sp-custom-fields label { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; font-size: 12px; color: var(--text-secondary-light); }
.sp-custom-fields input {
  width: 100%; min-width: 0; height: 44px; padding: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-surface); outline-offset: 0; font-size: 15px; color: var(--ink);
}
.sp-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; padding: 14px 22px; border-top: 1px solid var(--line); }
.sp-footer p { font-size: 12px; line-height: 1.5; color: var(--text-secondary-light); }
.sp-apply {
  flex: none; min-height: 36px; padding: 8px 20px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; line-height: 20px; color: var(--button-primary-ink);
}
.size-picker .sp-apply { background: var(--button-primary-bg); }
.size-picker .sp-apply:hover:not(:disabled) { background: var(--button-primary-hover); }
.size-picker .sp-apply:disabled { opacity: .4; }
.size-picker :is(button, input):focus-visible { outline-offset: -2px; }
@media (max-width: 620px) {
  .size-picker { width: calc(100vw - 20px); height: min(680px, calc(100dvh - 24px)); }
  .sp-header { padding: 14px 16px; }
  .sp-footer { padding: 12px 16px; }
  .sp-body { display: flex; flex-direction: column; }
  .sp-categories { flex: none; flex-direction: row; overflow: auto hidden; padding: 10px 16px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sp-categories button { width: auto; min-height: 40px; padding: 9px 12px; gap: 8px; font-size: 13px; white-space: nowrap; }
  .sp-main { flex: 1; gap: 12px; padding: 12px 16px 0; }
  .sp-search input { font-size: 16px; }
  .sp-option { gap: 9px; padding: 11px 8px; font-size: 13px; }
}

/* Pricing: separate cards, the popular one lifted under a lilac flag. Each card
   says what it costs, then how much it makes: its credits, a meter against the
   largest plan (--fill of 30 dots), and what those credits come to at the
   measured costs (a typical AI design about 30 credits, an AI image 4). */
.price-grid { gap: 20px; align-items: stretch; border: 0; border-radius: 0; overflow: visible; }
.price-card, .price-card + .price-card {
  display: flex; flex-direction: column; padding: 28px 28px 32px; border: 1px solid var(--line); border-radius: var(--radius-surface);
  background: var(--paper); overflow: hidden;
}
.price-card:not(.featured) { margin-top: 40px; }
.price-card.featured { background: var(--paper); border: 2px solid var(--lilac); padding: 27px 27px 31px; }
.price-flag {
  display: flex; align-items: center; justify-content: center; height: 40px; margin: -27px -27px 28px;
  background: var(--lilac); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1;
}
.price-top { margin-bottom: 22px; min-height: 30px; }
.price-badge { border-color: var(--line); background: var(--neutral-100); color: var(--ink); }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price-amount { font-size: 54px; line-height: 1.1; }
.price-row .price-period { margin: 0; }
.price-description { min-height: 52px; margin-top: 14px; max-width: none; }
.price-card > .btn { margin: 16px 0 0; }
.price-credits { --dots: 30; margin: 28px -28px 26px; padding: 20px 28px 18px; border-block: 1px solid var(--line); background: var(--neutral-100); }
.price-card.featured .price-credits { margin-inline: -27px; padding-inline: 27px; background: color-mix(in srgb, var(--lilac) 16%, var(--paper)); border-color: color-mix(in srgb, var(--lilac) 45%, var(--paper)); }
.price-credits-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-credits-head p { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.price-credits-head strong { font-weight: 650; }
.price-info { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -6px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); cursor: help; }
.price-info svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.price-info:is(:hover, :focus-visible) { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.price-tip {
  position: absolute; z-index: 5; right: -10px; bottom: calc(100% + 8px); width: min(280px, 80vw); padding: 10px 12px; border-radius: var(--radius-surface);
  background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.55; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.price-info:is(:hover, :focus-visible) + .price-tip { opacity: 1; transform: none; }
.price-meter { position: relative; display: block; height: 8px; margin: 14px 0 12px; background: radial-gradient(circle, var(--neutral-200) 0 3px, transparent 3.5px) 0 0 / calc(100% / var(--dots)) 100% repeat-x; }
.price-meter::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--fill) / var(--dots));
  background: radial-gradient(circle, var(--ink) 0 3px, transparent 3.5px) 0 0 / calc(100% / var(--fill)) 100% repeat-x;
}
.price-worth { font-size: 14px; line-height: 1.5; color: var(--muted); }
.price-worth strong { color: var(--ink); font-weight: 600; }
.price-card li b { font-weight: 600; }
.price-notes { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--muted); }
.price-notes li { display: flex; align-items: flex-start; gap: 8px; }
.price-notes svg { flex: none; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .price-card, .price-card + .price-card { padding-inline: 22px; }
  .price-card.featured { padding-inline: 21px; }
  .price-flag { margin-inline: -21px; }
  .price-credits { margin-inline: -22px; padding-inline: 22px; }
  .price-card.featured .price-credits { margin-inline: -21px; padding-inline: 21px; }
  .price-amount { font-size: 46px; }
  .price-credits-head p { font-size: 15px; }
}
@media (max-width: 800px) {
  .price-grid { grid-template-columns: 1fr; gap: 18px; }
  .price-card:not(.featured) { margin-top: 0; }
  .price-card, .price-card + .price-card { padding: 26px 24px 28px; }
  .price-card.featured { padding: 25px 23px 27px; }
  .price-flag { margin: -25px -23px 26px; }
  .price-credits { margin-inline: -24px; padding-inline: 24px; }
  .price-card.featured .price-credits { margin-inline: -23px; padding-inline: 23px; }
  .price-description { min-height: 0; }
}

/* the Monthly / Yearly switch for Pro and Max, beside the pricing heading */
.price-row[hidden] { display: none; }
.price-billing { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--line); }
.price-billing button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font: 500 12px/1 Inter, Arial, sans-serif; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.price-billing button:hover { color: var(--ink); }
.price-billing button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--neutral-1000) 14%, transparent); }
.price-billing button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.price-billing span { padding: 3px 6px; border-radius: var(--radius-pill); background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 600; }
.pricing-head .price-billing { flex: none; margin-bottom: 8px; }
.pricing-head .price-billing button { min-height: 34px; padding: 0 14px; font-size: 13px; }
@media (max-width: 800px) { .pricing-head { flex-wrap: wrap; } }
/* every card lists the same rows in the same order, so they line up across the
   plans; a feature a plan doesn't include stays in its row, muted, with a short line */
.price-card li { min-height: 24px; }
.price-card li.is-off { color: color-mix(in srgb, var(--muted) 55%, var(--paper)); }
.price-card li.is-off::before { -webkit-mask: none; mask: none; content: ""; left: 3px; top: calc(.775em - .75px); width: 10px; height: 1.5px; border-radius: 1px; background: currentColor; }
/* Rows line up across the cards whatever wraps: the cards share the grid's 17
   rows (subgrid) - the flag row, title, price, description, button, credits and
   the 11 line items (the list's own box steps aside) - so each row is as tall as
   its tallest cell. The flag row is the Pro flag; the other cards drop by the
   same 69px (margin, border and padding) through it, so their titles stay level. */
@media (min-width: 801px) {
  .price-grid { grid-template-rows: repeat(17, auto); row-gap: 0; column-gap: 20px; }
  .price-card, .price-card + .price-card { display: grid; grid-template-rows: subgrid; grid-row: span 17; align-content: start; }
  .price-card:not(.featured) { margin-top: 40px; padding-top: 28px; }
  .price-card.featured { padding-top: 0; }
  .price-flag { margin: 0 -27px 27px; }
  .price-lift { display: block; height: 0; }
  .price-card ul { display: contents; }
  .price-card li, .price-card li:last-child { margin: 0; padding-block: 8px; }
  .price-grid .price-card li::before { top: calc(8px + .2em); }
  .price-grid .price-card li.is-off::before { top: calc(8px + .775em - .75px); }
  .price-credits { margin-bottom: 18px; }
  .price-description { min-height: 0; align-self: end; }
}
@media (min-width: 801px) and (max-width: 1100px) { .price-flag { margin-inline: -21px; } }
@media (max-width: 800px) { .price-lift { display: none; } }