/* Accepted direction. Alternative artwork and variant implementations are retained. */
.why-variants,.loop-options,.people-options{display:none}
body .eyebrow{text-transform:none;letter-spacing:.035em}
#use-cases>.eyebrow{display:block;text-align:center;margin-bottom:20px}
#use-cases>h2{margin-bottom:46px}
.logo-story.ink-visible .mark-loop{animation-duration:3.2s}
#why.why-experiment{display:grid;grid-template-columns:repeat(2,minmax(0,560px));justify-content:center;column-gap:48px;row-gap:0;padding-block:80px}
#why .philosophy-copy>.eyebrow,#why .philosophy-copy>h2{grid-column:1/-1}
#why .philosophy-copy>.eyebrow{grid-row:1}
#why .philosophy-copy>h2{grid-row:2;margin-bottom:48px}
#why[data-layout="forest"] .philosophy-art{grid-column:1;grid-row:3;margin:0;align-self:center;width:100%}
#why .why-letter{grid-column:2;grid-row:3;margin:0;width:100%;align-self:center}
@media(max-width:1100px){header{flex-wrap:wrap;justify-content:center}header nav{gap:16px}header .experience-controls{width:auto}}
@media(max-width:850px){#why.why-experiment{grid-template-columns:minmax(0,560px);padding-block:54px}#why .philosophy-copy>h2{margin-bottom:34px}#why[data-layout="forest"] .philosophy-art{grid-column:1;grid-row:3}#why .why-letter{grid-column:1;grid-row:4;margin-top:34px}header nav{display:flex;flex-wrap:wrap;justify-content:center;margin-inline:auto}}
.hero h1 .natural{font-family:var(--hand);font-weight:400;letter-spacing:-.055em}
.hero h1 .word-swap{display:inline-block;width:auto;text-align:left;transition:width .32s cubic-bezier(.22,1,.36,1)}
.hero h1 .swap-word{display:inline-block;transition:opacity .2s ease,transform .2s ease}
.hero h1 .swap-word.leaving{opacity:0;transform:translateY(-.12em)}
.hero h1 .word-swap svg{inset:auto 0 .015em;width:100%;height:.15em;overflow:visible}
.hero h1 .word-swap path{stroke-dasharray:none;stroke-dashoffset:0;stroke-width:32;animation:none}
@media(prefers-reduced-motion:reduce){.hero h1 .swap-word{transition:none}}
/* White surfaces for use cases and the following plans section. */
#use-cases,#plans{background:#fff}
#plans .plan-grid article{background:#fff}

#why .why-letter{background-color:#fff;background-image:linear-gradient(#ffffff50,#ffffff50),url('/assets/folded-letter-paper.png');border-color:#e6e6e2}
/* Fine drafting hatches: narrow rails, close diagonal spacing. */
:root{--hatch-width:16px;--hatch:repeating-linear-gradient(135deg,transparent 0 3px,rgba(20,45,32,.13) 3px 4px)}
.layout-gutters>span{border-color:rgba(20,45,32,.12);background-color:transparent;background-size:auto}
.bento-section::after,.plans::after{border-color:rgba(20,45,32,.12)}
@media(max-width:760px){:root{--hatch-width:7px}.layout-gutters>span{background-size:auto}}
/* Horizontal rails meet the side gutters without doubling corner strokes. */
.layout-gutters::before,.layout-gutters::after{content:"";position:absolute;left:calc(var(--gutter) + var(--hatch-width) - 1px);right:calc(var(--gutter) + var(--hatch-width) - 1px);height:var(--hatch-width);box-sizing:border-box;border:1px solid rgba(20,45,32,.12);background:var(--hatch);pointer-events:none}
.layout-gutters::before{top:0}
.layout-gutters::after{bottom:0}
main>.how::after,main>.bento-section::after,main>.plans::after{display:none}
/* Adjacent framed sections share one horizontal rail. */
.how:has(+ .bento-section) .layout-gutters::after{display:none}
/* Content frames complement the surrounding hatch rails. */
:root{--panel-rule:rgba(20,45,32,.2)}
#how-it-works .launch-film{border:1px solid var(--panel-rule)}
#features .bento-card{border:1px solid var(--panel-rule)}
#features .product-voice{border-color:rgba(250,247,233,.25)}
#features .bento-card>.eyebrow{display:block;padding-bottom:16px;margin-bottom:20px;border-bottom:1px dashed var(--panel-rule)}
#features .product-voice>.eyebrow{border-bottom-color:rgba(250,247,233,.25)}
#use-cases .use-case-list{gap:0;border:1px solid var(--panel-rule)}
#use-cases .use-case-list article{padding:24px;border:0;min-width:0}
#use-cases .use-case-list article+article{border-left:1px solid var(--panel-rule)}
#use-cases .use-case-list h3{padding-top:20px;border-top:1px dashed var(--panel-rule)}
#plans .plan-grid article{border:1px solid var(--panel-rule)}
#plans .plan-top{padding-bottom:20px;border-bottom:1px dashed var(--panel-rule)}
@media(max-width:760px){#use-cases .use-case-list article{max-width:none;padding:22px}#use-cases .use-case-list article+article{border-left:0;border-top:1px solid var(--panel-rule)}}

/* Shared framed grids, with fine hatchwork between the panels. */
#features .bento,#plans .plan-grid{gap:14px;padding:14px;border:1px solid var(--panel-rule);background:var(--hatch);border-radius:0}
#features .bento>.bento-card,#plans .plan-grid>article{border:1px solid var(--panel-rule);border-radius:0;min-width:0}
#features .bento>.product-voice{border-color:rgba(250,247,233,.25)}
/* Quiet the example pages while keeping extension overlays crisp. */
#features .film-browser{filter:brightness(.9) saturate(.4)}
#features .film-page::after{content:"";position:absolute;inset:0;background:rgba(20,45,32,.19);pointer-events:none;z-index:1}
#features .film-page .film-selection,#features .film-page .film-pin{z-index:2}
#features .film-shared-evidence{filter:brightness(.81) saturate(.65)}
.closing.section-wrap>.button{order:3;margin:0 auto 42px}
.closing.section-wrap .logo-story{order:2;margin:32px auto 24px}
.closing.section-wrap>.footer-flourish{position:absolute;left:8%;top:90px;bottom:auto;width:75px;height:140px;transform:rotate(-28deg);color:var(--yellow);stroke:var(--yellow);right:auto;pointer-events:none}
@media(max-width:760px){#features .bento,#plans .plan-grid{gap:8px;padding:8px}.closing.section-wrap>.footer-flourish{left:5%;top:110px;width:40px;height:85px}}

/* Simple, continuous rules across the feature rows. */
#features .bento{padding:0;gap:0 24px;background:none;border:0;border-top:1px solid var(--panel-rule);border-bottom:1px solid var(--panel-rule)}
#features .bento>.bento-card{border:0;border-radius:0;margin-block:20px}
#features .bento>.bento-card:nth-child(n+3){margin-top:0;border-top:1px solid var(--panel-rule);padding-top:40px}
#features .bento>.bento-card:nth-child(3){position:relative}
#features .bento>.bento-card:nth-child(3)::before{content:"";position:absolute;top:-1px;right:-24px;width:24px;border-top:1px solid var(--panel-rule);pointer-events:none}
body>header{border-bottom:0}
main>.hero{border-top:0}
.hero .canvas-decor{mask-image:linear-gradient(transparent,#000 14%,#000 82%,transparent);}
.hero .canvas-pattern{mask-image:radial-gradient(ellipse at center,#000 15%,#0009 52%,transparent 74%)}
@media(max-width:760px){#features .bento{gap:0}#features .bento>.bento-card:nth-child(3)::before{display:none}#features .bento>.bento-card{margin:0;padding-block:28px}#features .bento>.bento-card+article{border-top:1px solid var(--panel-rule)}}

#features .bento-card{container-type:inline-size}
#features .bento-card h3{font-size:clamp(19px,5.5cqi,32px);line-height:1.2;letter-spacing:-.035em;white-space:nowrap}
#how-it-works .launch-film,#how-it-works .launch-film-screen{background:transparent;border:0;border-radius:0;box-shadow:none}
#how-it-works #walkthrough-video{width:100%;height:auto;aspect-ratio:auto;background:transparent}

/* Keep each feature card outlined without filling the gutters. */
#features .bento>.bento-card{border:1px solid var(--panel-rule)}
#features .bento>.product-voice{border-color:rgba(250,247,233,.3)}

/* Soft corners throughout the marketing interface. */
:root{--radius-card:20px;--radius-control:10px;--radius-frame:34px}
#features .bento>.bento-card,#plans .plan-grid>article{border-radius:var(--radius-card)}
#plans .plan-grid,#use-cases .use-case-list{border-radius:var(--radius-frame);overflow:hidden}
#how-it-works .launch-film,#how-it-works .launch-film-screen,#how-it-works #walkthrough-video{border-radius:var(--radius-card);overflow:hidden}
body .button,.hero .hero-sticker-stack .shuffle-stickers{border-radius:var(--radius-control)}
#why .why-letter{border-radius:var(--radius-control);overflow:hidden}
#features .bento>.bento-card:nth-child(3)::before{display:none}
@media(max-width:760px){:root{--radius-card:16px;--radius-frame:24px}}

.closing.section-wrap>.button.yellow{width:max-content;min-width:0;flex:0 0 auto;align-self:center;justify-content:center;gap:12px;padding-inline:20px;border-radius:var(--radius-control)}

/* Handwriting-style reveal: ink travels across the word, then its underline. */
.hero h1 .word-swap.writing .swap-word{animation:hero-ink-write .62s cubic-bezier(.22,.08,.28,1) both}
.hero h1 .word-swap.writing path{stroke-dasharray:1;stroke-dashoffset:1;animation:hero-underline-write .32s cubic-bezier(.16,.7,.3,1) .43s both}
@keyframes hero-ink-write{from{clip-path:inset(-15% 100% -15% -8%)}to{clip-path:inset(-15% -8% -15% -8%)}}
@keyframes hero-underline-write{to{stroke-dashoffset:0}}
body.motion-paused .hero h1 .word-swap.writing :is(.swap-word,path){animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero h1 .word-swap.writing .swap-word{animation:none;clip-path:none}.hero h1 .word-swap.writing path{animation:none;stroke-dashoffset:0}}

/* Echo the hero's softly fading grid behind the closing mark. */
.closing.section-wrap{isolation:isolate}
.closing.section-wrap>.canvas-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(transparent,#000 14%,#000 82%,transparent)}
.closing .canvas-pattern{background-image:linear-gradient(#e8efcf19 1px,transparent 1px),linear-gradient(90deg,#e8efcf19 1px,transparent 1px),linear-gradient(#e8efcf12 1px,transparent 1px),linear-gradient(90deg,#e8efcf12 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px;mask-image:radial-gradient(ellipse at center,#000 15%,#0009 52%,transparent 74%)}

/* Continuous corner curves where supported; proportional radii elsewhere. */
@supports (corner-shape: squircle){
 #features .bento>.bento-card,#plans .plan-grid,#plans .plan-grid>article,
 #use-cases .use-case-list,#how-it-works .launch-film,
 #how-it-works .launch-film-screen,#how-it-works #walkthrough-video,
 #why .why-letter,body .button,.hero .hero-sticker-stack .shuffle-stickers{corner-shape:squircle}
}

/* Keep the logo and playback controls together on narrow screens. */
@media(max-width:760px){
 body>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 8px;min-height:0;height:auto;padding:14px 4%}
 body>header>.wordmark{grid-column:1;grid-row:1;min-width:0;font-size:clamp(15px,4.3vw,20px);gap:7px}
 body>header>.wordmark img{width:30px;height:30px}
 body>header .beta-tag{display:none}
 body>header>.experience-controls{grid-column:2;grid-row:1;width:auto;display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-end;margin:0}
 body>header>nav{grid-column:1/-1;grid-row:2;width:100%;margin:0;gap:12px;justify-content:center}
}

/* Header icons share one readable treatment in either palette preview. */
body>header .experience-controls :is(.sound-toggle,.motion-toggle){color:#f8f5ed;flex-shrink:0}
body>header .experience-controls svg,body>header .experience-controls svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body>header .experience-controls button:focus-visible{outline:2px solid #ffe04b;outline-offset:4px}
#features .bento-card>.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.4;letter-spacing:0;text-align:left}
#features .bento-card .product-step{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;line-height:1;letter-spacing:0}
@media(max-width:760px){
 main#main>.hero{min-height:calc(100svh - var(--site-header-height,110px));justify-content:flex-start}
 main#main>.hero .hero-sticker-stack{margin-top:auto;padding-top:0}
 main#main>.hero .actions{margin-bottom:24px}
}