.features-section { padding-block:100px 112px; }
.features-heading { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:42px; }
.features-heading h2 { font-size:clamp(36px,4.2vw,56px); line-height:1.08; letter-spacing:-.04em; font-weight:600; }
.features-heading p { max-width:540px; margin-top:22px; color:#5e687b; font-size:16px; line-height:1.7; }
.features-heading>.motion-toggle { flex:none; margin-bottom:2px; }
.feature-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; }
.bento-card { position:relative; min-width:0; overflow:hidden; border:1px solid #e0e5ed; border-radius:24px; background:#fff; display:flex; flex-direction:column; }
.bento-copy { position:relative; z-index:2; padding:32px 32px 0; }
.bento-copy h3 { font-size:29px; line-height:1.14; letter-spacing:-.035em; font-weight:600; }
.bento-copy>p { max-width:390px; margin-top:15px; font-size:13px; line-height:1.75; color:#5e687b; }
.bento-art { position:relative; min-height:0; flex:1; }
.bento-transcribe { grid-column:span 7; min-height:468px; background:linear-gradient(160deg,#fff 40%,#edf1fc); }
.bento-transcribe h3 { font-size:34px; }
.bento-speakers { grid-column:span 5; min-height:468px; background:linear-gradient(140deg,#2055e3,#173eb7); border-color:#2048c7; color:#fff; }
.bento-speakers .bento-copy>p { color:#e1e8ff; }
.bento-find,.bento-import,.bento-local { grid-column:span 4; min-height:398px; }
.bento-find { background:#f5f6f7; }
.bento-import { background:linear-gradient(155deg,#f5f7fe,#fff 70%); }
.bento-local { background:#f0f2ee; }
.bento-languages { grid-column:span 4; min-height:360px; background:#fff; }
.bento-export { grid-column:span 8; min-height:360px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); background:linear-gradient(130deg,#f4f5f8,#edf0fa); }
.bento-export .bento-copy { padding-bottom:32px; }
.bento-export .text-link { display:inline-block; font-size:12px; margin-top:23px; }
.transcribe-art { margin:23px 30px 29px; }
.recording-token { display:flex; align-items:center; gap:8px; max-width:320px; font-size:11px; color:#35465f; padding:10px 13px; background:#fff; border:1px solid #e0e5ed; border-radius:11px; }
.recording-token>svg { width:17px; height:20px; color:#174bdf; }
.recording-token>span:last-child { margin-left:auto; color:#66728a; font:10px 'Courier New',monospace; }
.transcript-leaf { margin-top:14px; padding:17px 19px 13px; border:1px solid #e2e6ef; border-radius:14px; background:#ffffffed; box-shadow:0 12px 22px -14px #30303028; }
.excerpt-label { display:block; color:#626d80; font:8px 'Courier New',monospace; letter-spacing:.08em; margin-bottom:17px; }
.excerpt-row { display:flex; gap:13px; align-items:start; margin-top:12px; }
.excerpt-row>span { flex:none; color:#69768c; font:10px/1.7 'Courier New',monospace; }
.excerpt-row>p { color:#26344d; font-size:12px; line-height:1.5; white-space:normal; width:auto; margin:0; }
.transcript-finish { display:flex; align-items:center; gap:6px; margin-top:20px; color:#536582; font-size:10px; }
.transcript-finish svg { width:13px; height:13px; color:#174bdf; }
.speakers-art { padding:30px 27px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.speaker-track { display:flex; align-items:center; gap:13px; padding:16px 14px; border-radius:15px; border:1px solid #ffffff38; background:#ffffff0d; animation:speaker-turn 12s ease-in-out infinite; animation-play-state:paused; }
.speaker-b { animation-delay:-6s; }
.speaker-avatar { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff; color:#2446b6; font-size:15px; font-weight:500; }
.speaker-b .speaker-avatar { background:#e7e1d4; color:#655343; }
.speaker-track>div { min-width:0; }
.speaker-track>div>span { display:block; color:#fff; font-size:10px; margin-bottom:5px; }
.speaker-track p { font-size:11px; line-height:1.5; color:#f4f6ff; }
.speaker-track>i { display:block; flex:none; width:5px; height:5px; border-radius:50%; background:#b7c9ff; margin-left:auto; }
.speaker-note { margin-top:6px; font:8px 'Courier New',monospace; letter-spacing:.04em; color:#e1e8ff; }
.find-art { padding:24px 25px 26px; display:flex; justify-content:center; flex-direction:column; }
.search-specimen { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #dce1e9; padding:10px 12px; border-radius:10px; font-size:11px; color:#364660; }
.search-specimen svg { width:13px; height:13px; color:#66738c; }
.search-specimen>i { width:1px; height:13px; background:#174bdf; animation:caret-blink 1.5s steps(1,end) infinite; animation-play-state:paused; }
.found-excerpt { padding:17px 3px 0; display:flex; gap:10px; }
.found-excerpt>span { flex:none; color:#69768c; font:9px/1.8 'Courier New',monospace; }
.found-excerpt p { font-size:11px; line-height:1.8; color:#45516a; }
.found-excerpt mark { background:#dbe4ff; color:#174bdf; padding:2px 3px; border-radius:3px; animation:found-phrase 12s ease-in-out infinite; animation-play-state:paused; }
.edit-note { display:flex; gap:6px; align-items:center; font-size:9px; color:#657189; margin-top:18px; }
.edit-note svg { width:12px; height:12px; color:#174bdf; }
.import-art { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:17px; padding:23px 20px 27px; }
.file-fan { position:relative; height:105px; width:208px; }
.bento-file { position:absolute; width:67px; height:86px; top:5px; left:70px; background:linear-gradient(140deg,#fff,#f2f5fc); border:1px solid #d9e0ed; border-radius:9px; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:10px; color:#174bdf; box-shadow:0 6px 10px -7px #30303040; animation:file-breathe 14s ease-in-out infinite; animation-play-state:paused; }
.bento-file svg { width:24px; height:26px; stroke-width:1.25; }
.bento-file>span { font:8px 'Courier New',monospace; color:#66738c; }
.file-one { --file-angle:-18deg; --file-shift:-53px; transform:translateX(-53px) rotate(-18deg); }
.file-two { --file-angle:0deg; --file-shift:0px; z-index:2; }
.file-three { --file-angle:18deg; --file-shift:53px; transform:translateX(53px) rotate(18deg); }
.link-specimen { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #e1e6ef; border-radius:9px; background:#ffffffb5; color:#53627b; font-size:9px; white-space:nowrap; }
.link-specimen svg { width:13px; height:13px; }
.local-art { display:flex; align-items:center; justify-content:center; flex-direction:column; padding:15px 20px 27px; }
.local-art>img { width:110px; height:110px; position:relative; z-index:1; }
.local-halo { position:absolute; width:160px; height:160px; border:1px solid #bac6b5; border-radius:50%; transform:scale(.85); opacity:.6; animation:local-breathe 14s ease-in-out infinite; animation-play-state:paused; }
.local-stamp { position:relative; display:flex; align-items:center; gap:7px; padding-top:10px; font:8px 'Courier New',monospace; color:#53644f; }
.local-stamp svg { width:12px; height:12px; }
.languages-art { display:flex; align-content:center; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; padding:27px 24px 33px; }
.languages-art>span { font-size:12px; color:#485774; padding:10px 13px; border:1px solid #e0e5ed; border-radius:8px; background:#f8f9fb; animation:language-turn 18s ease-in-out calc(var(--language-order)*-3s) infinite; animation-play-state:paused; }
.export-specimen { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:24px 27px; }
.bento-document { width:165px; aspect-ratio:595/842; position:relative; border:1px solid #d9dfe8; border-radius:3px; background:#fff; box-shadow:0 15px 23px -15px #3333333d; transform:rotate(7deg); animation:document-drift 16s ease-in-out infinite; animation-play-state:paused; }
.bento-document img { display:block; width:100%; height:100%; border-radius:inherit; }
.export-chip { position:absolute; border:1px solid #dfe4ee; background:#fff; color:#385280; padding:9px 12px; border-radius:9px; font:11px 'Courier New',monospace; box-shadow:0 5px 9px -7px #33333345; animation:chip-drift 16s ease-in-out infinite; animation-play-state:paused; }
.export-chip-one { left:13px; top:26%; }
.export-chip-two { right:9px; top:47%; animation-delay:-5s; }
.export-chip-three { left:20px; bottom:16%; animation-delay:-10s; }
.feature-notes { display:flex; justify-content:space-between; gap:30px; padding-top:23px; }
.feature-notes p { flex:1; max-width:510px; font-size:10px; line-height:1.75; color:#657189; }
.motion-active .speaker-track,.motion-active .search-specimen>i,.motion-active .found-excerpt mark,.motion-active .bento-file,.motion-active .local-halo,.motion-active .languages-art>span,.motion-active .bento-document,.motion-active .export-chip { animation-play-state:running; }
@keyframes speaker-turn { 0%,40%,100% { background:#ffffff24; transform:translateX(0); } 50%,90% { background:#ffffff08; transform:translateX(5px); } }
@keyframes found-phrase { 0%,35%,100% { background:#dbe4ff; } 55%,85% { background:#edf1fb; } }
@keyframes file-breathe { 0%,100% { transform:translateX(var(--file-shift)) rotate(var(--file-angle)); } 50% { transform:translateX(calc(var(--file-shift)*1.1)) translateY(-5px) rotate(var(--file-angle)); } }
@keyframes local-breathe { 0%,100% { transform:scale(.85); opacity:.6; } 50% { transform:scale(1); opacity:.3; } }
@keyframes language-turn { 0%,14%,100% { background:#eaf0ff; border-color:#b9cafa; color:#174bdf; } 20%,94% { background:#f8f9fb; border-color:#e0e5ed; color:#485774; } }
@keyframes document-drift { 0%,100% { transform:translateY(0) rotate(7deg); } 50% { transform:translateY(-5px) rotate(5deg); } }
@keyframes chip-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
@media(max-width:1000px) {
  .bento-copy { padding:26px 25px 0; }
  .bento-copy h3 { font-size:26px; }
  .bento-transcribe h3 { font-size:30px; }
  .bento-find,.bento-import,.bento-local { grid-column:span 4; }
  .bento-copy>p { font-size:12px; }
  .speakers-art { padding:22px 20px 27px; }
  .speaker-track { padding:13px 11px; gap:10px; }
  .speaker-avatar { width:29px; height:29px; }
  .transcribe-art { margin-inline:22px; }
  .find-art { padding-inline:22px; }
  .excerpt-row>p { font-size:11px; }
  .bento-document { width:140px; }
}
@media(max-width:760px) {
  .features-section { padding-block:70px 76px; }
  .feature-bento { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .bento-transcribe,.bento-speakers,.bento-find,.bento-import,.bento-local,.bento-languages { grid-column:span 1; }
  .bento-transcribe,.bento-speakers { min-height:450px; }
  .bento-export { grid-column:1/-1; min-height:330px; }
  .features-heading { align-items:start; flex-direction:column; gap:15px; margin-bottom:28px; }
  .features-heading p { font-size:14px; max-width:460px; }
  .bento-copy h3,.bento-transcribe h3 { font-size:25px; }
  .excerpt-row { gap:8px; }
  .transcript-leaf { padding:14px 13px; }
  .recording-token { font-size:9px; gap:5px; padding:9px; }
  .recording-token>span:last-child { display:none; }
  .speaker-track p { font-size:10px; }
  .speaker-note { font-size:7px; }
}
@media(max-width:560px) {
  .feature-bento { grid-template-columns:minmax(0,1fr); }
  .bento-transcribe,.bento-speakers,.bento-find,.bento-import,.bento-local,.bento-languages,.bento-export { grid-column:1; }
  .features-heading h2 { font-size:35px; }
  .bento-copy { padding:27px 25px 0; }
  .bento-copy h3,.bento-transcribe h3 { font-size:29px; }
  .bento-copy>p { font-size:13px; }
  .bento-transcribe,.bento-speakers { min-height:433px; }
  .bento-find,.bento-import,.bento-local { min-height:365px; }
  .bento-languages { min-height:330px; }
  .bento-export { grid-template-columns:minmax(0,1fr); }
  .bento-export .bento-copy { padding-bottom:0; }
  .export-specimen { min-height:285px; }
  .bento-document { width:155px; }
  .export-chip-one { left:16%; top:22%; }
  .export-chip-two { right:11%; top:49%; }
  .export-chip-three { left:18%; bottom:16%; }
  .speaker-note { font-size:8px; }
  .speaker-track p { font-size:11px; }
  .feature-notes { flex-direction:column; gap:12px; }
  .feature-notes p { font-size:10px; }
  .features-heading>.motion-toggle { font-size:11px; }
  .story .story-top h2 { max-width:230px; font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .speaker-track,.search-specimen>i,.found-excerpt mark,.bento-file,.local-halo,.languages-art>span,.bento-document,.export-chip { animation:none; }
}
.story .story-top h2 { margin-top:0; }
.excerpt-label { font-size:9px; }
.excerpt-row>p { font-size:13px; }
.speaker-note { font-size:9px; }
.link-specimen { max-width:100%; white-space:normal; line-height:1.5; }
.motion-ready .transcript-finish { animation:transcript-ready .4s ease-out 4.9s both; animation-play-state:paused; }
.motion-active .transcript-finish { animation-play-state:running; }
@keyframes transcript-ready { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { .excerpt-row>p { font-size:11px; } }
@media(max-width:560px) { .excerpt-row>p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .motion-ready .transcript-finish { animation:none; } }
.bento-speakers { background-color:#174bdf; background-image:linear-gradient(140deg,#2055e3,#173eb7); }
.feature-notes p { font-size:12px; }
@media(max-width:560px) { .bento-copy h3,.bento-transcribe h3 { font-size:27px; } }
img[src="/sylloro/assets/sylloro-icon.png"] { border-radius:22.5%; }