@import url('/fonts/fonts.css?v=3');@import url('/tokens.css');/* both at once: fonts.css is also tokens.css's import (same ?v=, bump both), so the face no longer waits one hop behind the tokens */
*{box-sizing:border-box}html{scroll-behavior:smooth}button,a,select,label,input,summary{touch-action:manipulation}h1,h2,h3{text-wrap:balance}body{margin:0;font-family:var(--font-latin);background:var(--color-bg);color:var(--color-text);font-size:14px;line-height:1.6}html[lang=ar] body{font-family:var(--font-arabic);line-height:1.9}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:var(--color-action);text-decoration:none}a:hover{text-decoration:underline}input,textarea,select{min-width:0;max-width:100%;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:7px;padding:var(--space-2) var(--space-3);outline-offset:2px}input[type=checkbox]{width:auto;accent-color:var(--color-action)}input[type=range]{padding:0;accent-color:var(--color-action)}textarea{resize:vertical;line-height:1.8}label{display:grid;gap:var(--space-2);font-size:12px;font-weight:500}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.3}html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{line-height:1.65;letter-spacing:0}h1{font-size:34px;letter-spacing:-1px}h2{font-size:20px}h3{font-size:15px}.hint,.muted{color:var(--color-text-muted);font-size:12px}.hint{line-height:1.8;margin:8px 0}.danger{color:var(--color-danger)}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.brand-logo{display:block;width:100px;height:40px;position:relative;overflow:hidden;flex:none}.brand-logo img{position:absolute;width:139px;max-width:none;height:auto;left:-20px;top:-15px}.language-toggle{display:inline-flex;align-items:center;gap:var(--space-2);border-color:var(--studio-line-input);background:transparent;color:inherit;white-space:nowrap}.skip-link{position:fixed;top:-80px;inset-inline-start:var(--space-5);z-index:100;background:var(--color-surface);padding:12px}.skip-link:focus{top:10px}.site-nav{background:var(--forest-900);color:var(--ivory-50);position:sticky;top:0;z-index:10;border-bottom:1px solid #34463e}.nav-inner{max-width:1200px;padding:var(--space-4) var(--space-6);margin:auto;display:flex;align-items:center;gap:var(--space-6)}.nav-links{display:flex;gap:var(--space-5)}.nav-links a{color:#c6d2cc;font-size:12px}.nav-actions{margin-inline-start:auto;display:flex;align-items:center;gap:12px}.nav-actions>a:not(.button){color:var(--ivory-50);font-size:12px}.container{max-width:1200px;margin:auto;padding-inline:32px}.landing-hero{padding-block:var(--space-8) var(--space-7)}.hero-heading{display:flex;gap:var(--space-7);justify-content:space-between;align-items:end;margin-bottom:var(--space-6)}.hero-heading h1{font-size:clamp(36px,4.3vw,58px);max-width:740px;letter-spacing:-2px;line-height:1.12;margin:12px 0 0}.hero-heading>p{max-width:270px;color:var(--color-text-muted);font-size:14px;margin-bottom:4px}.pilot-status{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-action);font-size:12px}.pilot-status:before,.local-dot:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#6b9654;margin-inline-end:4px}.hero-workbench{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:stretch}.upload-card,.demo-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:18px;overflow:hidden}.upload-card{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}.upload-zone{width:100%;border:1.5px dashed var(--color-border-strong);background:var(--color-bg);border-radius:12px;display:flex;flex-direction:column;gap:var(--space-3);text-align:center;padding:var(--space-6) var(--space-4);min-height:172px;color:var(--color-text)}.upload-zone:hover{background:var(--color-surface-raised)}.upload-icon{width:38px;height:38px;border-radius:50%;background:var(--color-tint);display:grid;place-items:center;color:var(--color-tint-text);font-size:23px}.upload-zone strong{font-size:15px}.upload-zone span:last-child{font-size:11px;font-weight:400;color:var(--color-text-muted)}.language-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.language-pills button{font-size:11px;padding:var(--space-2) var(--space-3)}.upload-card .primary{width:100%;padding:var(--space-3)}.upload-card>p{margin:0;text-align:center}.demo-head,.demo-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);font-size:11px;gap:12px}.demo-head{border-bottom:1px solid var(--color-border)}.demo-head span:last-child{color:var(--color-action)}.demo-screen{height:220px;position:relative;display:grid;place-items:center;background:var(--forest-900);overflow:hidden}.waveform{display:flex;align-items:center;justify-content:center;gap:var(--space-1);opacity:.28;position:absolute;inset:0}.waveform i{width:3px;border-radius:2px;background:var(--lime-500);height:var(--h)}.demo-caption{position:relative;text-align:center;color:var(--ivory-50);font-family:var(--font-arabic);font-size:28px;line-height:2;padding:var(--space-4);margin:0}.demo-caption mark,.caption-sample mark{background:var(--lime-500);color:var(--forest-900);border-radius:5px;padding:0 var(--space-2);margin-inline:2px;box-decoration-break:clone}.demo-cue{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-size:13px}.demo-cue time{font-size:11px;color:var(--color-text-muted);font-variant-numeric:tabular-nums;direction:ltr}.demo-cue p{margin:0}.demo-cue .demo-en{font-size:11px;color:var(--color-text-muted)}.demo-footer button{padding:var(--space-1) var(--space-3);font-size:11px}.landing-note{display:flex;justify-content:space-between;margin:var(--space-4) 0 0;font-size:11px;color:var(--color-text-muted);gap:12px}.section-white{background:var(--color-surface);border-block:1px solid var(--color-border)}.landing-section{padding-block:var(--space-8)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-5)}.section-heading h2{font-size:30px;letter-spacing:-.7px;margin:0 0 8px}.section-heading p{color:var(--color-text-muted);max-width:550px;margin:0}.workflow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5);padding:0;margin:var(--space-6) 0 0;counter-reset:steps}.workflow li{border-top:2px solid var(--color-action);padding-top:16px;counter-increment:steps}.workflow li:before{content:'0' counter(steps);color:var(--color-text-muted);font-size:11px}.workflow h3{margin:12px 0 8px}.workflow p{font-size:12px;color:var(--color-text-muted);margin:0}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}.template-card{padding:0;border-radius:14px;overflow:hidden;display:block;text-align:start;font-weight:400}.template-card[aria-pressed=true]{outline:2px solid var(--color-action);outline-offset:3px}.caption-sample{height:160px;background:var(--forest-800);color:white;display:grid;place-items:center;padding:var(--space-4);text-align:center;font-family:var(--font-arabic);font-size:21px}.caption-sample.bold{font-weight:800;background:#345346}.caption-sample.boxed{background:#526555}.caption-sample.boxed span{background:#0b1f19;padding:var(--space-1) var(--space-3);border-radius:5px}.caption-sample.fade{background:#273f36}.caption-sample.fade span{opacity:.65}.template-info{padding:16px;display:block}.template-info strong{display:block;font-size:13px;margin-bottom:4px}.template-info small{color:var(--color-text-muted);font-size:11px}.export-feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}.export-feature h2{font-size:34px;max-width:470px}.export-feature p{color:var(--color-text-muted);max-width:440px}.format-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.format-list div{padding:24px 16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg)}.format-list b{display:block;font-size:21px;font-weight:500}.format-list span{font-size:11px;color:var(--color-text-muted)}.access-card{background:var(--forest-700);color:var(--ivory-50);padding:var(--space-7);border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}.access-card h2{font-size:30px;margin-bottom:var(--space-3)}.access-card p{color:#cad8cf;margin-bottom:0;max-width:620px}.access-card .button{white-space:nowrap}.faq{max-width:760px;margin:var(--space-7) auto 0}.faq details{border-bottom:1px solid var(--color-border);padding:var(--space-4) 0}.faq summary{cursor:pointer;font-weight:600}.faq p{margin:var(--space-4) 0 0;color:var(--color-text-muted);font-size:13px}.site-footer{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-6);border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:11px;gap:var(--space-4)}.site-footer a{font-size:12px}
/* Workspace and editor */
.app-shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--studio-panel);color:var(--ivory-50);padding:24px 16px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100vh;overflow:auto}.sidebar .brand-logo{margin:0 var(--space-3) var(--space-5)}.sidebar label{color:var(--studio-fg-2);font-size:12px}.sidebar select{background:var(--studio-fill);color:var(--studio-fg);border-color:var(--studio-line-input);font-size:12px;width:100%}.sidebar .new{background:var(--color-highlight);color:var(--color-highlight-text);border-color:var(--color-highlight);justify-content:center;margin-top:4px}.sidebar h2{font-size:12px;font-weight:500;color:var(--studio-fg-3);margin:var(--space-2) var(--space-3) 0;display:flex;justify-content:space-between}.sidebar #project-search{background:transparent;color:var(--studio-fg);border-color:var(--studio-line-input);font-size:12px}.sidebar #projects{display:grid;align-content:start;gap:4px;flex:1;min-height:80px;overflow:auto}.sidebar #projects button{width:100%;text-align:start;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.sidebar #credit-balance{color:var(--studio-fg-3);font-size:12px;margin:0 var(--space-3)}.sidebar-bottom{border-top:1px solid var(--studio-line);padding-top:12px;display:grid;gap:2px}.sidebar-bottom button{font-size:12px;padding:var(--space-2) var(--space-3)}.local{font-size:12px;color:var(--studio-fg-3);padding:var(--space-2) var(--space-3)}.app-main{min-width:0}.app-header{height:70px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:16px;padding:0 var(--space-6);background:var(--color-surface)}.app-header #account-name{font-size:13px}.app-header .language-toggle{color:var(--color-action);border-color:var(--color-border);margin-inline-start:auto}.header-mode{font-size:12px;color:var(--color-text-muted)}#menu-toggle{display:none}#welcome{padding:var(--space-7) var(--space-6);max-width:1200px;margin:auto}.welcome-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);margin-bottom:var(--space-6)}.welcome-heading h1{margin-bottom:8px}.welcome-heading p{color:var(--color-text-muted);margin:0}.welcome-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5)}.welcome-upload{padding:var(--space-6);background:var(--color-surface);border-radius:18px;border:1px solid var(--color-border)}.welcome-upload .upload-zone{min-height:245px}.welcome-upload p{margin:var(--space-4) 0 0}.welcome-art{border-radius:18px;background:var(--forest-800);color:var(--ivory-50);padding:var(--space-6);display:flex;flex-direction:column;justify-content:space-between;min-height:320px}.welcome-art>span{font-size:12px;color:#c6d2cc}.welcome-art p{font-family:var(--font-arabic);font-size:35px;line-height:1.8;margin:var(--space-5) 0}.welcome-art mark{background:var(--lime-500);border-radius:5px;padding:0 8px;color:var(--forest-900)}.welcome-art small{font-size:12px;color:#baccc0}.recent-heading{display:flex;justify-content:space-between;align-items:center;margin:var(--space-6) 0 var(--space-4)}.recent-heading h2{margin:0}.recent-heading span{font-size:13px;color:var(--color-text-muted)}#project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{display:block;background:var(--color-surface);border:1px solid var(--color-border);padding:0;border-radius:12px;text-align:start;overflow:hidden;font-weight:400}.project-card .project-thumb{height:100px;background:var(--color-tint);display:flex;align-items:center;justify-content:center;color:var(--color-tint-text);font-size:32px}.project-card .project-meta{padding:16px;display:block}.project-card strong{font-size:13px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.project-card small{display:flex;justify-content:space-between;margin-top:8px;color:var(--color-text-muted);font-size:12px}.empty-projects{grid-column:1/-1;padding:var(--space-5);border:1px dashed var(--color-border-strong);border-radius:12px;text-align:center;color:var(--color-text-muted);font-size:13px}#editor{padding:var(--space-5) var(--space-5)}.project-heading{display:flex;align-items:center;gap:16px;margin-bottom:var(--space-4)}.project-heading h1{font-size:21px;letter-spacing:-.5px;overflow-wrap:anywhere;margin:0}.project-heading .heading-copy{min-width:0}.project-heading .hint{margin:var(--space-1) 0 0;font-size:12px}.badge{display:inline-flex;font-size:12px;white-space:nowrap;background:var(--color-tint);color:var(--color-tint-text);padding:var(--space-1) var(--space-3);border-radius:99px}.heading-actions{display:flex;gap:8px;margin-inline-start:auto}.heading-actions button{font-size:12px;padding:8px 12px}.editor-grid{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(280px,1fr) 250px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px;overflow:hidden;min-height:590px}.preview-column{min-width:0;border-inline-end:1px solid var(--color-border);background:var(--color-surface-raised);display:flex;flex-direction:column}.panel-caption{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-size:12px;font-weight:600;background:var(--color-surface);display:flex;align-items:center;justify-content:space-between;gap:8px}.player{position:relative;direction:ltr;background:var(--forest-900);margin:var(--space-5) var(--space-4);display:grid;align-items:center;min-height:270px;border-radius:8px;overflow:hidden}.player video{width:100%;display:block;max-height:470px;min-height:220px}.player #overlay{position:absolute;inset-inline:8%;bottom:70px;text-align:center;color:white;pointer-events:none;line-height:1.7;text-shadow:0 2px 4px black;overflow-wrap:anywhere;border-radius:4px}.player #overlay div{font-family:var(--font-arabic);unicode-bidi:plaintext}.preview-column>.hint{padding:0 var(--space-4)}.playback-tools{display:flex;align-items:center;gap:8px;padding:0 var(--space-4) var(--space-4);font-size:12px}.playback-tools select{padding:var(--space-1);font-size:12px}.playback-tools #play-pause{width:34px;height:34px;padding:0}.playback-tools label{display:flex;align-items:center;margin-inline-start:auto}.timeline{background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-4) var(--space-4);margin-top:auto;direction:ltr}.timeline>label{font-size:12px;color:var(--color-text-muted)}.timeline input{width:100%}.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;margin:8px 0;font-size:12px}.timeline-toolbar label{display:flex;align-items:center;font-size:12px}.timeline-toolbar select{padding:2px var(--space-2);font-size:12px}.cue-scroll{overflow:auto;padding-bottom:var(--space-2)}#cue-strip{height:34px;position:relative;min-width:100%;background:var(--color-bg);border-radius:4px}#cue-strip button{position:absolute;top:3px;height:27px;padding:0;font-size:12px;overflow:hidden;min-width:4px}.transcript{min-width:0;display:flex;flex-direction:column;border-inline-end:1px solid var(--color-border)}.transcript-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);gap:8px}.transcript-head h2{font-size:13px;margin:0}.transcript-head button{font-size:12px;padding:var(--space-1) var(--space-3)}#segments{max-height:570px;min-height:320px;overflow:auto;flex:1}.segment{padding:var(--space-4);border-bottom:1px solid var(--color-border);border-inline-start:3px solid transparent}.segment.active-cue{background:color-mix(in srgb,var(--color-highlight) 14%,var(--color-surface));border-inline-start-color:var(--color-action)}.times{display:flex;gap:var(--space-2);align-items:end;direction:ltr}.times label{font-size:12px;flex:1;gap:var(--space-1)}.times input{width:100%;font-size:12px;padding:var(--space-1) var(--space-1)}.segment>label{display:grid;font-size:12px;color:var(--color-text-muted);margin-top:var(--space-2);gap:var(--space-1)}.segment textarea{width:100%;font-size:14px;padding:var(--space-2) var(--space-2);border-color:var(--color-border);min-height:42px}.segment .quality:empty{display:none}.segment .quality{font-size:12px;color:var(--color-warning)}.caption-tools{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:8px}.caption-tools button{font-size:12px;padding:4px 8px}.caption-tools input{font-size:12px;padding:var(--space-1) var(--space-2);width:100%;border:0;background:transparent}.empty{padding:var(--space-6) var(--space-5);color:var(--color-text-muted);font-size:13px;text-align:center}.save-row{padding:var(--space-3) var(--space-4);display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;border-top:1px solid var(--color-border)}#save-state{font-size:12px;color:var(--color-text-muted)}.save-row button{padding:var(--space-2) var(--space-3);font-size:12px}.inspector{background:var(--color-surface);min-width:0}.inspector-tabs{display:flex;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.inspector-tabs button{flex:1;padding:var(--space-4) var(--space-2);font-size:12px}.inspector-pane{padding:16px}.inspector-pane h3{font-size:14px;margin-bottom:var(--space-3)}.inspector-pane label{font-size:12px;margin-bottom:var(--space-3)}.inspector-pane input,.inspector-pane select{width:100%;font-size:12px}.inspector-pane input[type=color]{height:36px;padding:4px}.inspector-pane button{font-size:12px;padding:var(--space-2) var(--space-3)}.inspector-pane .primary{width:100%}.inspector-pane .hint{font-size:12px;margin-block:12px}.inspector-pane details{border-top:1px solid var(--color-border);margin-top:var(--space-4);padding-top:var(--space-4)}.inspector-pane summary{font-size:12px;font-weight:600;cursor:pointer;margin-bottom:12px}.tool-grid{display:grid;gap:8px}.tool-grid label{margin:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-3)}.style-row label{width:100%}.translation-bar h2{font-size:14px}.exports,.downloads{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.exports a,.downloads a{font-size:12px;border:1px solid var(--color-border);border-radius:7px;padding:var(--space-2) var(--space-3);background:var(--color-surface)}.downloads label{width:100%}.downloads a:not([href]){color:var(--color-text-muted);border-style:dashed;pointer-events:none}.downloads a[download]{cursor:pointer}#audio-tools{margin-top:16px}#audio-tools audio{width:100%;height:35px}#audio-tools label{display:flex;align-items:start}#audio-tools input{width:auto}#audio-tools a{font-size:12px}.editor-bottom{display:flex;justify-content:space-between;gap:var(--space-4);padding:12px 2px;font-size:12px;color:var(--color-text-muted)}#notice{position:fixed;bottom:var(--space-5);inset-inline-end:var(--space-5);z-index:60;max-width:min(470px,calc(100vw - 40px));background:var(--forest-900);color:var(--ivory-50);box-shadow:var(--shadow-raised);padding:var(--space-4) var(--space-5);border-radius:12px;font-size:13px;white-space:pre-line;overflow-wrap:anywhere}#notice:empty{display:none}dialog{border:1px solid var(--color-border);border-radius:18px;padding:var(--space-5);background:var(--color-bg);color:var(--color-text);width:min(560px,calc(100% - 32px));max-height:85vh;overflow:auto;box-shadow:var(--studio-float)}dialog::backdrop{background:var(--studio-scrim);backdrop-filter:blur(3px)}dialog h2{font-size:20px}dialog p{font-size:13px;color:var(--color-text-muted)}dialog textarea,dialog input{width:100%}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-4)}.panel-head h2{margin:0}.panel-head button{font-size:22px;padding:0;width:32px;height:32px}#panel-content{display:grid;gap:var(--space-3)}.panel-row,.variant-row{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3)}.panel-row p,.variant-row p{width:100%;margin:0}.suggestion{color:var(--color-action)}#dictionary form>div{display:flex;gap:var(--space-3);justify-content:end;margin-top:var(--space-4)}.upload-progress{height:6px;border-radius:99px;overflow:hidden;background:var(--color-surface-raised);margin-top:var(--space-4)}.upload-progress progress{width:100%;height:6px;display:block;accent-color:var(--color-action)}
/* Account and review pages use the same brand system. */
#captions{position:absolute;inset-inline:8%;bottom:65px;text-align:center;color:white;text-shadow:0 1px 3px black;font-size:22px;pointer-events:none}#captions div{unicode-bidi:plaintext}
@media(min-width:1600px){.editor-grid{grid-template-columns:minmax(400px,1.2fr) minmax(360px,1fr) 290px}.player{min-height:390px}#segments{max-height:650px}}
@media(max-width:1200px){.app-shell{grid-template-columns:195px minmax(0,1fr)}.sidebar{padding:var(--space-5) var(--space-3)}.editor-grid{grid-template-columns:minmax(240px,1fr) minmax(260px,1fr)}.inspector{grid-column:1/-1;border-top:1px solid var(--color-border)}.inspector-pane{max-width:720px}.inspector-tabs button{flex:none;min-width:100px}.transcript{border-inline-end:0}#editor{padding:var(--space-5)}.header-mode{display:none}.heading-actions button{font-size:12px}.welcome-grid{grid-template-columns:1fr 1fr}#welcome{padding:var(--space-6) var(--space-5)}}
@media(max-width:800px){.nav-inner{padding:var(--space-3) var(--space-5);gap:16px}.nav-links{display:none}.nav-actions{gap:8px}.nav-actions>a:not(.button){display:none}.container{padding-inline:var(--space-5)}.hero-heading{display:block}.hero-heading h1{font-size:39px;letter-spacing:-1.3px}.hero-heading>p{max-width:520px;margin-top:var(--space-5)}.hero-workbench{grid-template-columns:1fr 1.2fr;gap:16px}.upload-card{padding:var(--space-4);gap:16px}.upload-zone{padding:var(--space-5) var(--space-3)}.demo-screen{height:235px}.workflow{grid-template-columns:repeat(3,1fr)}.template-grid{grid-template-columns:repeat(2,1fr)}.export-feature{gap:var(--space-5)}.export-feature h2{font-size:28px}.format-list{grid-template-columns:repeat(2,1fr)}.access-card{padding:var(--space-6)}.app-shell{display:block}.sidebar{display:none;position:fixed;inset-block:0;inset-inline-start:0;width:250px;z-index:40;box-shadow:0 0 0 100vmax var(--studio-scrim)}.sidebar.mobile-open{display:flex}#menu-toggle{display:inline-flex;padding:var(--space-1) var(--space-3);font-size:18px}.app-header{height:62px;padding:0 var(--space-4)}.welcome-heading h1{font-size:28px}.project-heading{flex-wrap:wrap}.heading-actions{margin-inline-start:0}#project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nav-actions .button{font-size:11px;padding:8px 12px}.nav-actions .language-toggle{font-size:11px;padding:var(--space-2) var(--space-3)}.brand-logo{width:83px;height:34px}.brand-logo img{width:115px;left:-16.5px;top:-12.5px}.landing-hero{padding-block:32px}.hero-heading h1{font-size:34px}.hero-heading>p{font-size:13px}.hero-workbench{grid-template-columns:1fr}.demo-screen{height:190px}.landing-note{flex-direction:column;font-size:11px;gap:4px}.landing-section{padding-block:var(--space-6)}.section-heading h2{font-size:25px}.section-heading{display:block}.section-heading p{font-size:12px}.workflow{grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-4)}.template-grid{gap:12px}.caption-sample{height:130px;font-size:18px}.template-info{padding:12px}.export-feature{grid-template-columns:1fr}.format-list{grid-template-columns:repeat(3,1fr)}.format-list div{padding:16px 12px}.format-list b{font-size:18px}.access-card{display:block;padding:var(--space-5)}.access-card h2{font-size:25px}.access-card p{font-size:12px}.access-card .button{margin-top:var(--space-5)}.site-footer{flex-wrap:wrap}.welcome-grid{grid-template-columns:1fr}.welcome-art{min-height:230px;padding:var(--space-5)}.welcome-art p{font-size:28px;margin:var(--space-3) 0}.welcome-upload{padding:var(--space-4)}.welcome-upload .upload-zone{min-height:185px}.welcome-heading{display:block}.welcome-heading .button{margin-top:var(--space-4)}#welcome{padding:var(--space-5) var(--space-4)}#project-grid{grid-template-columns:1fr 1fr;gap:var(--space-3)}.project-card .project-meta{padding:12px}.project-card small{display:grid;gap:var(--space-1)}.recent-heading h2{font-size:17px}#editor{padding:var(--space-4) var(--space-3)}.editor-grid{grid-template-columns:1fr}.preview-column{border-inline-end:0;border-bottom:1px solid var(--color-border)}.player{margin:var(--space-4);min-height:200px}.player video{max-height:360px}.transcript{border:0}#segments{max-height:440px;min-height:180px}.project-heading h1{font-size:18px}.heading-actions{width:100%;flex-wrap:wrap}.editor-bottom{flex-direction:column;gap:var(--space-1)}}
.settings-grid>label:nth-child(-n+2),.settings-grid>label:last-child{grid-column:1/-1}.sample-note{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);background:var(--color-surface);border-radius:8px;font-size:12px;color:var(--color-text-muted);margin-bottom:var(--space-4)}.busy-note{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-strong);background:var(--color-tint);border-radius:8px;font-size:12px;color:var(--color-tint-text);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}.busy-note:before{content:'';width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--color-border-strong);border-top-color:var(--color-tint-text);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.inspector-pane .translation-bar{margin-top:24px;border-top:1px solid var(--color-border);padding-top:var(--space-5)}.project-heading .heading-copy{flex:1}.project-heading h1{word-break:break-word}.project-heading .heading-actions{flex:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Landing additions: dropzone drag state, expanded caption-style gallery, editors list, accuracy, audio, pricing, creators, origin. */
.upload-zone.dragover{background:var(--color-tint);border-color:var(--color-action)}
.caption-sample.highlight{background:#1c3028}.caption-sample.pop{background:#243626}.caption-sample.bubble{background:#2c2e1f;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.caption-sample.karaoke{background:#1f2f2a}
.pop-word{display:inline-block;font-weight:800;transform:scale(1.16);color:var(--lime-500)}
.bubble-word{background:var(--lime-500);color:var(--forest-900);border-radius:999px;padding:var(--space-1) var(--space-4);font-size:16px;font-weight:700}
.karaoke .sung{font-style:normal;color:var(--lime-500);font-weight:700}
.demo-screen.style-highlight .demo-caption mark{background:var(--lime-500)}.demo-screen.style-pop .demo-caption mark{background:none;color:var(--lime-500);display:inline-block;transform:scale(1.14);font-weight:800}.demo-screen.style-bubble .demo-caption mark{background:var(--lime-500);border-radius:999px;padding:2px var(--space-4)}.demo-screen.style-karaoke .demo-caption mark{background:none;color:var(--lime-500);font-weight:800}
.editor-compat{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:8px;max-width:420px}.editor-compat li{display:grid;grid-template-columns:1fr auto auto auto;gap:var(--space-3);align-items:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;padding:var(--space-3) var(--space-4);font-size:11px}.editor-compat .ok{color:var(--color-success);font-weight:600}
.accuracy-section{background:var(--forest-700);color:var(--ivory-50)}.accuracy-section .kicker{color:var(--lime-500);font-size:12px;font-weight:600;margin:0 0 8px}.accuracy-section p{color:#cfe0d7}.accuracy-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-7);align-items:center}
.dictionary-card{background:var(--forest-800);border:1px solid #3B5245;border-radius:14px;padding:var(--space-5);display:grid;gap:var(--space-3)}.dictionary-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.dictionary-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-top:1px solid #3B5245;padding-top:var(--space-3)}.dictionary-row .strike{color:#b7c6bf;text-decoration:line-through}.accuracy-section .hint{color:#b7c6bf}
.audio-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-7);align-items:center}.audio-compare{display:grid;gap:12px}.audio-row{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-4) var(--space-4);display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center}.audio-row.after{border-color:var(--color-action)}.audio-play{width:34px;height:34px;border-radius:50%;border:1px solid var(--color-border);display:grid;place-items:center;font-size:11px}.audio-row.after .audio-play{background:var(--color-action);color:var(--color-action-text);border-color:var(--color-action)}.audio-bars{display:block;height:26px;border-radius:3px;background:repeating-linear-gradient(90deg,#9ba49d 0 3px,transparent 3px 6px);opacity:.9}.audio-bars.after{background:repeating-linear-gradient(90deg,var(--forest-500) 0 3px,transparent 3px 6px);transform:scaleY(.65)}
.proposed-tag{font-size:11px;font-weight:700;color:var(--color-warning);border:1px solid currentColor;border-radius:999px;padding:2px var(--space-3);margin-inline-start:var(--space-3);vertical-align:middle}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.pricing-card{border:1px solid var(--color-border);border-radius:16px;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-bg)}.pricing-card.featured{border:2px solid var(--color-action);background:var(--color-surface)}.pricing-card .price{font-size:28px;font-weight:700}.pricing-card .price small{font-size:11px;font-weight:500;color:var(--color-text-muted)}.pricing-card ul{list-style:none;margin:4px 0 0;padding:0;font-size:12px;color:var(--color-text-muted);display:grid;gap:var(--space-2);flex:1}.pricing-card li:before{content:'✓';color:var(--color-action);margin-inline-end:var(--space-2)}.pricing-card button,.pricing-card .button{margin-top:var(--space-2)}
.creators-section{display:grid;gap:var(--space-6)}.creators-logos{display:grid;gap:var(--space-4);justify-items:center}.creators-logos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}.creators-logos li{width:110px;height:40px;border-radius:8px;border:1px dashed var(--color-border-strong)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.testimonial-placeholder{border:1px dashed var(--color-border-strong);border-radius:14px;padding:var(--space-5);display:grid;gap:var(--space-3);background:var(--color-surface)}.t-head{display:flex;align-items:center;gap:var(--space-3)}.t-avatar{width:38px;height:38px;border-radius:50%;background:var(--color-border);flex:none}.t-head div{display:grid;gap:var(--space-1)}.t-line{display:block;height:9px;border-radius:4px;background:var(--color-border);width:100%}.t-line.short{width:60px}
.origin-section{max-width:760px;margin:0 auto;padding-block:var(--space-8);display:grid;gap:var(--space-4)}.origin-section .kicker{color:var(--color-action);font-size:12px;font-weight:600;margin:0}.origin-section h2{font-size:26px}.origin-section p{color:var(--color-text-muted);font-size:15px}
@media(max-width:800px){.accuracy-grid,.audio-grid{grid-template-columns:1fr;gap:24px}.pricing-grid,.testimonial-grid{grid-template-columns:1fr 1fr}.editor-compat{max-width:none}}
.pricing-grid+h3{margin-top:32px}
@media(max-width:560px){.pricing-grid,.testimonial-grid{grid-template-columns:1fr}.editor-compat li{grid-template-columns:1fr;text-align:center}.site-nav .theme-mode{display:none}}

/* Caption-preset gallery (landing + /ar/ pages). Cards and their frames are both
   generated from templates.json (build_pages.py + scripts/build_preset_gallery.py),
   so the count and the labels here can never drift from the product. */
/* A dark brand block inside a light page. The element carries data-surface="site"
   (index.html), so tokens.css recomputes every derived --studio-* role from THIS
   element's --color-* rather than the root's — which is why only the colour roles
   below are restated and the sixteen --studio-* lines this block used to carry are
   gone. --color-action is lime here on purpose: the site set's action is forest-700,
   so a pressed pill was painting the band's own colour on the band (1.00:1, with
   "selected" signalled only by losing its border). Lime measures 8.74:1 on it. */
.section-forest{background:var(--forest-700);color:var(--ivory-50);
 --color-bg:var(--forest-700);--color-surface:var(--forest-800);--color-surface-raised:var(--forest-600);
 --color-text:var(--ivory-50);--color-text-muted:var(--forest-100);
 --color-border:var(--forest-600);
 /* An idle filter chip is an interactive boundary, so it owes 3:1 (WCAG 1.4.11).
    forest-500 measures 1.91:1 on this band; there is no primitive between it and
    forest-100 (10.65:1, far too loud for a resting outline), so this is mixed from
    two of them and measures 3.90:1. */
 --color-border-strong:color-mix(in srgb,var(--ivory-50) 50%,var(--forest-700));
 --color-action:var(--lime-500);--color-action-hover:var(--lime-400);--color-action-text:var(--ink-900)}
.section-forest h2{color:var(--ivory-50)}
.preset-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-5)}
.landing-hero,[id]{scroll-margin-top:var(--space-9)}
.preset-filter .qk-btn{padding:var(--space-2) var(--space-4);font-size:13px;border-radius:var(--radius-pill)}
.preset-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.preset-card{background:var(--forest-900);border:1px solid var(--forest-600);border-radius:var(--radius-md);overflow:hidden;display:grid;grid-template-rows:auto auto}
.preset-card img{display:block;width:100%;height:auto;aspect-ratio:720/260;object-fit:cover}
.preset-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-3);border-top:1px solid var(--forest-600)}
.preset-meta strong{font-size:14px;color:var(--ivory-50)}
.preset-meta small{font-size:11px;color:var(--forest-100);margin-inline-start:auto}
.preset-pack{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);background:var(--color-action);color:var(--color-action-text)}
.preset-grid+.preset-more{display:flex;margin:var(--space-5) auto 0}
/* /ar/ pages put the gallery on the ivory ground, so the card chrome flips there. */
.preset-grid--light .preset-card{border-color:var(--color-border)}.preset-grid--light .preset-meta{border-top-color:var(--color-border);background:var(--color-surface)}.preset-grid--light .preset-meta strong{color:var(--color-text)}.preset-grid--light .preset-meta small{color:var(--color-text-muted)}
@media(max-width:560px){.preset-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--space-5));padding-inline:var(--space-5)}.preset-filter .qk-btn{flex:none}.preset-grid{grid-template-columns:1fr 1fr;gap:var(--space-3)}.preset-meta{padding:var(--space-2) var(--space-2) var(--space-3)}.preset-meta small{display:none}}
/* The footer's legal links were 19 px tall at 390 — the only standalone tap targets
   on the public pages under the 44 px minimum (ui.css's mobile rule covers buttons and
   selects, not links). Inline links inside prose are deliberately left alone: they are
   part of a sentence, not a target. */
@media(max-width:560px){.site-footer a{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}.site-nav .brand-logo{height:44px}.site-nav .brand-logo img{top:-7.5px}}

/* Signup tells you the password rule before you hit it; the recovery screen's two
   actions are a full-width pair so "I saved it, continue" reads as the way forward. */
#password-hint{margin-top:var(--space-2);font-size:11px}
/* D2-16: on the phone studio the inspector is a bottom sheet whose 46px handle peeks above the fold (ui.css); the toast sits above it, never on it. */
@media(max-width:560px){body.studio-page #notice{bottom:calc(46px + 12px)}}
/* Loop 12, round 5: a logo pair follows the theme (DESIGN: never the dark-lettered logo on a dark ground). */
.logo-on-dark{display:none}:root[data-theme=dark] .logo-on-light{display:none}:root[data-theme=dark] .logo-on-dark{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .logo-on-light{display:none}:root:not([data-theme=light]) .logo-on-dark{display:block}}
/* Loop 12, round 7: one footer on every public page: the site links, then every dialect and city page (none was linked before). */
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 16px}.site-footer .footer-nav a{display:inline-flex;align-items:center;min-height:32px}
@media(pointer:coarse){.site-footer .footer-nav a{min-height:44px}}
/* Loop 12, round 15: a link inside running text is underlined, not told apart by colour alone (lime on muted ivory is 1.3:1 on the dark site). */
main p a:not(.button):not(.qk-btn):not(.qk-cta){text-decoration:underline;text-underline-offset:2px}
/* Loop 12, round 16: the public site's page and section titles speak in the display face (Lalezar), as the studio's titles
   do, so site and studio share one voice; body, h3 and controls stay Readex Pro. Lalezar has one weight, no tracking. */
:root:not([data-surface="studio"]) :is(h1,h2){font-family:var(--studio-display-font,'Lalezar','Lalezar Fallback',Tahoma,sans-serif);font-weight:400;letter-spacing:0}
/* Arabic pages count the steps in Arabic-Indic digits, without the Latin leading zero. */
html[lang=ar] .workflow li:before{content:counter(steps,arabic-indic)}
/* Loop 12, round 36: touch targets on the public pages: FAQ questions and the phone's icon-only Theme pill reach 44 px. */
@media(pointer:coarse){.faq summary{padding-block:var(--space-2)}}

/* Loop 12, round 39: one real product shot of the editor (the Rail) under "how it works", in the page's language;
   the one image treatment: 18px corners, a hairline, no filter. WebP q78, ~30 KB. */
.studio-shot{margin:var(--space-6) 0 0}.studio-shot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--color-border)}
/* Loop 12, round 40: the logo link is a 44 px target; the box grows 2 px (desk) / 5 px (phone) above and below and the
   image moves down by the same amount, so the mark sits exactly where it did (the PNG's canvas margin fills the rest). */
.brand-logo{height:44px}.brand-logo img{top:-13px}
@media(max-width:560px){.brand-logo{height:44px}.brand-logo img{top:-7.5px}}

/* Landing, Direction B «الحقل» (12 Oct 2026, research/design-directions/home2): the first screen is the studio's lime upload
   field with the headline inside it, the one lime surface on the page (DESIGN: one large lime surface when it IS the primary
   action); ink on lime in both themes. The label's ::after stretches over the whole field so any point opens the picker; the
   foot lets clicks through except on its chips. Below it everything is quiet: four looks, three verbs, one price line. */
.landing-hero{padding-block:var(--space-5) 0}
.field{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:calc(100svh - 150px);background:var(--lime-500);color:var(--forest-900);border-radius:28px;padding:var(--space-8)}
.field::before{content:'';position:absolute;inset:var(--space-4);border:2px dashed rgba(11,31,25,.28);border-radius:20px;pointer-events:none}
.field.dragover{background:var(--lime-400)}
.field:has(input:focus-visible){outline:3px solid var(--color-text);outline-offset:4px}
.landing-hero .field h1{font-size:clamp(64px,9.4vw,148px);line-height:1.12;margin:0;color:inherit}
.landing-hero .field:lang(en) h1{font-size:clamp(52px,7.4vw,118px);line-height:1.04}
.field input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.field-drop{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:400;cursor:pointer}
.field-drop::after{content:'';position:absolute;inset:0;border-radius:28px}
.field-drop strong{display:block;font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.5}
.field-arrow{flex:none;width:96px;height:96px;border-radius:50%;background:var(--forest-900);color:var(--lime-500);display:grid;place-items:center;font-size:44px;line-height:1;transition:transform .2s}
.field:hover .field-arrow,.field.dragover .field-arrow{transform:translateY(-4px)}
.field-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap;font-size:14px;pointer-events:none}
.field-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.field-chips>span{font-weight:500;margin-inline-end:var(--space-2)}
.field-chips button{pointer-events:auto;border:1.5px solid var(--forest-900);background:transparent;color:var(--forest-900);padding:var(--space-1) var(--space-4);font-size:14px}
.field-chips button:hover{background:rgba(11,31,25,.08)}
.field-chips button[aria-pressed=true]{background:var(--forest-900);color:var(--lime-500)}
.field-chips button:focus-visible{outline-color:var(--forest-900)}
.landing-hero .landing-note{font-size:12px;margin:16px 0 0}
#templates,#how{padding-block:var(--space-9) 0}
:is(#templates,#how,.landing-close) h2{font-size:clamp(36px,4vw,60px);line-height:1.3;margin:0}
.lede{color:var(--color-text-muted);max-width:52ch;margin:var(--space-2) 0 0}
.looks{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;font-size:14px;color:var(--color-text-muted)}
.look-frame{position:relative;aspect-ratio:3/4;border-radius:28px;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,var(--forest-600),var(--forest-900) 70%);border:6px solid var(--forest-700);margin-bottom:12px}
/* The preset card's flat forest ground melts into the frame's gradient (lighten), leaving the caption on a lit 'shot'. */
.look-frame img{position:absolute;bottom:14%;left:50%;width:205%;mix-blend-mode:lighten;max-width:none;height:auto;transform:translateX(-50%)}
.looks strong{color:var(--color-text);font-weight:600}
.looks-more{margin:var(--space-5) 0 0;font-size:14px}
.verbs{list-style:none;margin:var(--space-7) 0 0;padding:var(--space-6) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7);border-top:1px solid var(--color-border)}
.verbs h3{font-family:var(--studio-display-font,'Lalezar','Lalezar Fallback',Tahoma,sans-serif);font-weight:400;font-size:40px;line-height:1.3;margin:0 0 var(--space-2)}
.verbs p{color:var(--color-text-muted);max-width:34ch;margin:0 0 8px}
.verbs .hint{max-width:none}
.landing-close{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-block:var(--space-9) var(--space-8)}
.landing-close p{color:var(--color-text-muted);font-size:14px;margin:var(--space-2) 0 0}
.landing-close .button{font-size:16px;padding:var(--space-4) var(--space-6)}
@media(max-width:800px){
 .landing-hero{padding-block:var(--space-4) 0}
 .field{min-height:calc(100svh - 120px);padding:var(--space-6) var(--space-5) var(--space-6);border-radius:24px;gap:var(--space-6)}
 .field::before{inset:var(--space-3);border-radius:16px}.field-drop::after{border-radius:24px}
 .landing-hero .field h1{font-size:clamp(52px,15vw,84px);line-height:1.18}
 .landing-hero .field:lang(en) h1{font-size:clamp(44px,12vw,72px);line-height:1.08}
 .field-drop{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
 .field-arrow{width:72px;height:72px;font-size:34px}
 .field-foot{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
 #templates,#how{padding-top:var(--space-8)}
 .looks{grid-template-columns:repeat(4,70%);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-5);gap:var(--space-4);margin-inline:calc(-1 * var(--space-5));padding-inline:var(--space-5)}
 .looks li{scroll-snap-align:start}
 .verbs{grid-template-columns:1fr;gap:var(--space-5)}
 .landing-close{padding-block:var(--space-8) var(--space-7)}.landing-close .button{width:100%}
}
/* Motion A «الكلمة» (13 Oct 2026, research/design-directions/motion): a phone in the lime field where a caption lands word by
   word, and look tiles that perform their style once. landing.js drives both through one helper (three cues, one curve,
   transform + opacity only); the phone and the live layers are decorative (aria-hidden) and never take a click. */
.field-phone{position:relative;align-self:center;flex:none;width:150px;aspect-ratio:9/16;border-radius:24px;border:5px solid var(--forest-900);background:radial-gradient(120% 75% at 50% 28%,var(--forest-500,#2A6B58),var(--forest-700,#163D32) 38%,var(--forest-900) 78%);overflow:hidden;pointer-events:none;container-type:inline-size;box-shadow:0 16px 36px rgba(11,31,25,.32)}
.field-phone::before{content:'';position:absolute;top:6px;left:50%;width:28%;height:9px;margin-left:-14%;border-radius:9px;background:var(--forest-900)}
.field-cap{position:absolute;inset-inline:5%;bottom:20%;margin:0;text-align:center;color:#fff;font:400 13cqw/1.7 var(--studio-display-font,'Lalezar',Tahoma,sans-serif);text-shadow:0 0 3px #0B3D2E,0 0 3px #0B3D2E,0 2px 6px rgba(0,0,0,.45)}
@media(min-width:801px){.field-phone{position:absolute;top:var(--space-8);inset-inline-end:var(--space-8);width:clamp(150px,14vw,200px)}.landing-hero .field h1{padding-inline-end:calc(clamp(150px,14vw,200px) + var(--space-6))}}
/* Word anatomy: .a resting glyphs, .b the highlighted copy laid exactly on top, .bg the lime pill behind. Whole words only. */
:is(.field-cap,.look-live) .w{display:inline-block;position:relative;z-index:0}
:is(.field-cap,.look-live) .b{position:absolute;inset:0;opacity:0}
.field-cap .hl{margin-inline:.2em}.field-cap .hl .b{color:var(--forest-900);text-shadow:none}
.field-cap .bg{position:absolute;inset:.2em -.2em .15em;border-radius:7px;background:var(--lime-500);transform-origin:right center;z-index:-1}
.look-frame{container-type:inline-size}
.look-live{position:absolute;inset-inline:0;bottom:14%;height:48.4cqw;display:grid;place-items:center;text-align:center;padding:8cqw 6% 0;opacity:0;pointer-events:none;line-height:1.6}
.look-live .line{position:relative;z-index:0;display:inline-block}
.look-live[data-look=khaleeji]{font:800 7.4cqw 'QK Changa',Tahoma,sans-serif;color:#fff;text-shadow:0 0 2px #0B3D2E,0 0 2px #0B3D2E}
.look-live[data-look=khaleeji] .b{color:#C8E87A}
.look-live[data-look=tunis]{font:700 8cqw 'QK Plex',Tahoma,sans-serif;color:#fff}
.look-live[data-look=tunis] .box{position:absolute;inset:-.1em -.45em;background:#1E3A8A;border-radius:6px;transform-origin:right center;z-index:-1}
.look-live[data-look=ramadan]{padding-top:0;font:700 8.5cqw 'QK Ruqaa',Tahoma,serif;color:#E8C87A;text-shadow:0 0 2px #2A1A08,0 0 8px rgba(232,200,122,.55)}
.look-live[data-look=ramadan] .b{color:#FFF0C2}
.look-live[data-look=masri]{font:400 9cqw 'Lalezar',Tahoma,sans-serif;color:#FFD400;text-shadow:0 0 2px #0A0A0A,0 0 2px #0A0A0A,0 0 2px #0A0A0A}
.look-live[data-look=masri] .b{color:#F04E9E}
/* Sign-in page, Direction B «البطاقة» (13 Oct 2026, research/design-directions/auth): the form is one lime 9:16 card, the
   same object as the home upload card and the export card. The card re-points the colour tokens, so inputs, hints, the
   focus ring and the .qk-cta read forest on lime with no per-control colours (forest-700 on lime 8.7:1, input border
   3.5:1). The card is the one lime surface on the screen; its action is forest with lime words, as the landing's arrow. */
.auth-body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.auth-top{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6)}
.auth-top-actions{display:flex;gap:var(--space-2);margin-inline-start:auto}
.auth-container{flex:1;display:grid;place-items:center;padding:0 var(--space-6) var(--space-6)}
.auth-card{--color-text:var(--forest-900);--color-text-muted:var(--forest-700);--color-surface:rgba(255,255,255,.5);--color-border-strong:rgba(11,31,25,.55);--color-focus:var(--forest-900);
 --studio-accent:var(--forest-900);--studio-accent-ink:var(--lime-500);--studio-accent-ring:rgba(11,31,25,.2);--studio-sheen:rgba(200,232,122,.2);--studio-sheen-lit:rgba(200,232,122,.3);
 width:min(440px,100%,max(360px,(100dvh - 112px) * 9 / 16));aspect-ratio:9/16;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);
 border-radius:28px;background:var(--lime-500);color:var(--forest-900);box-shadow:0 0 0 1px rgba(11,31,25,.12),0 24px 48px rgba(0,0,0,.25)}
.auth-card :is(#forms,#recovery-box){flex:1;display:flex;flex-direction:column;gap:var(--space-3)}
.auth-card :is(#forms,#recovery-box)[hidden]{display:none}
.auth-modes{display:grid;grid-template-columns:repeat(3,1fr);padding:var(--space-1);border-radius:999px;background:rgba(11,31,25,.1)}
.auth-modes button{min-height:44px;padding:0 var(--space-2);border:0;border-radius:999px;background:transparent;color:var(--forest-900);font-size:12px;font-weight:600;transition:background var(--duration-fast,120ms) var(--ease-standard,ease)}
.auth-modes button:hover{background:rgba(11,31,25,.08)}
.auth-modes button[aria-pressed=true]{background:var(--ivory-50);box-shadow:0 1px 3px rgba(11,31,25,.25)}
/* the card's "video": the brand caption, inverted for the lime ground; Motion A timing, base style = the final frame */
.auth-card .auth-cap{color:var(--forest-900);flex:1;display:flex;align-items:center;justify-content:center;min-height:96px;margin:0;text-align:center;font:400 44px/1.6 var(--studio-display-font,'Lalezar',Tahoma,sans-serif)}
#forms:has(#name-label:not([hidden])) .auth-cap{display:none}
.auth-cap .w,#heading .w{display:inline-block;position:relative;z-index:0}
.auth-cap .hl{color:var(--lime-500);margin-inline:.15em}
.auth-cap .hl::before{content:'';position:absolute;inset:.18em -.2em .12em;border-radius:7px;background:var(--forest-900);z-index:-1;transform-origin:right center}
@media (prefers-reduced-motion:no-preference){
 .auth-cap .w{animation:qk-auth-lift var(--studio-dur-move,240ms) var(--studio-ease-out,cubic-bezier(.2,0,0,1)) calc(var(--i) * 200ms) both}
 .auth-cap .hl::before{animation:qk-auth-grow var(--studio-dur-state,160ms) var(--studio-ease-out,cubic-bezier(.2,0,0,1)) 840ms both}
}
@keyframes qk-auth-lift{from{opacity:0;transform:translateY(.45em)}}
@keyframes qk-auth-grow{from{transform:scaleX(0)}}
.auth-body .auth-card h1{margin:auto 0 0;font:400 52px/1.25 var(--studio-display-font,'Lalezar',Tahoma,sans-serif)}
html[lang=en] .auth-body .auth-card h1{font-size:44px;line-height:1.1}
.auth-card p,.auth-card small{margin:0;font-size:12px;line-height:1.6;color:var(--color-text-muted)}
.auth-card small a{color:var(--forest-900);text-decoration:underline;text-underline-offset:2px}   /* lime card: the brand link colour is lime, so links in the card go forest and keep their underline */
.auth-card #description{font-size:13px}
#auth-form{display:flex;flex-direction:column;gap:var(--space-3)}
.auth-card label{gap:var(--space-1);font-weight:600}
.auth-card label small{font-weight:400}
.auth-card input{width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border-width:1.5px;border-radius:12px}
.auth-why{display:flex;gap:var(--space-2);align-items:flex-start}
.auth-why[hidden]{display:none}
.auth-check{display:flex;gap:var(--space-2);align-items:flex-start;font-size:13px;line-height:1.5}
.auth-check[hidden]{display:none}
.auth-check input{flex:none;width:auto;min-height:0;padding:0;margin-top:3px}   /* 16 Oct: .auth-card input's width:100% made the box take the whole row and squeezed the text off the card */
.auth-why .qk-icon{flex:none;margin-top:var(--space-1)}
.auth-card .qk-cta{width:100%;min-height:48px}
.auth-link{align-self:flex-start;min-height:32px;padding:0;border:0;background:none;color:var(--forest-900);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth-link:hover{background:none;text-decoration-thickness:2px}
.auth-card #notice{position:static;inset:auto;margin:0;padding:0;background:none;box-shadow:none;color:var(--forest-900);font-size:13px;font-weight:600}
.auth-card #notice:empty{display:none}
.auth-card #notice::before{display:none}
.auth-card #code{display:block;direction:ltr;overflow-wrap:anywhere;padding:var(--space-4);border:1.5px dashed var(--forest-900);border-radius:12px;background:var(--color-surface);font-size:14px}
.auth-card #copy-code{width:100%;justify-content:center;min-height:44px;background:transparent;border:1.5px solid var(--forest-900);color:var(--forest-900)}
@media(max-width:560px){
 .auth-top{padding:var(--space-3) var(--space-4)}
 .auth-top .theme-mode{display:none}
 .auth-container{display:block;padding:0 var(--space-4) var(--space-4)}
 .auth-card{width:100%;aspect-ratio:auto;padding:var(--space-4);border-radius:24px}
 .auth-card .auth-cap{display:none}
 .auth-body .auth-card h1,html[lang=en] .auth-body .auth-card h1{margin-top:0;font-size:32px}
}

/* Pricing B «البطاقة» (13 Oct 2026, research/design-directions/pricing): the plans are the app's 9:16 card. Free is the one lime
   card (it is the page's action; its button is forest with lime words, as the sign-in card's), the paid plans are surface cards
   whose price is one Lalezar numeral and whose buttons stay quiet outline pills (billing on or off), so the page keeps one lime
   surface. "Proposed, payment not enabled" is a stamp under the h1 (warning ink: amber-600 on ivory 6.1:1, #F2C66B on forest-900).
   The per-job table sits behind one «كل مهمة» disclosure. Markup: static/pricing.html shell + build_pages.pricing_block(). */
.pricing-page{padding-block:var(--space-7) var(--space-8)}
.pricing-page h2{font-size:28px;margin:0 0 var(--space-2)}
.price-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-5);margin-bottom:var(--space-6)}
.price-head h1{margin:0;font-size:56px;letter-spacing:0}
html[lang=en] .price-head h1{line-height:1.15}
.price-head h1 .w{display:inline-block}
.price-stamp{margin:0;padding:var(--space-1) var(--space-4);font:400 20px/1.4 var(--studio-display-font,'Lalezar',Tahoma,sans-serif);color:var(--color-warning);
 border:2px solid currentColor;outline:1px solid currentColor;outline-offset:3px;border-radius:6px;transform:rotate(-3deg)}
html[dir=ltr] .price-stamp{transform:rotate(3deg)}
.plan-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-7)}
.plan-cards:has(+ .hint){margin-bottom:var(--space-4)}
.plan-cards + .hint{margin:0 0 var(--space-7)}
.plan-cards .pricing-card{aspect-ratio:9/16;border-radius:28px;padding:var(--space-5);gap:var(--space-2);background:var(--color-surface)}
.plan-cards .pricing-card > strong{order:-2;font-size:14px;font-weight:600}
/* one line under each name (Free's minutes, a paid plan's «سعر مقترح»), so every price sits at the same height */
.plan-cards .pricing-card > .hint{order:-1;margin:0;font-size:13px;font-weight:600}
.plan-cards .pricing-card:not(.featured) > .hint{color:var(--color-warning)}
.plan-cards .pricing-card ul{flex:none;margin:auto 0 var(--space-3)}
.plan-cards .pricing-card :is(button,.button){width:100%;min-height:44px;justify-content:center;margin:0;border-radius:999px}
.pricing-page .price{display:flex;align-items:baseline;gap:var(--space-2);font:400 104px/1 var(--studio-display-font,'Lalezar',Tahoma,sans-serif)}
.plan-cards .price{margin-top:var(--space-6)}
.pricing-page .price small{font:600 12px/1.4 var(--font-arabic);color:var(--color-text-muted)}
html[lang=en] .pricing-page .price small{font-family:var(--font-latin)}
.plan-cards .featured{--color-text-muted:var(--forest-700);--color-focus:var(--forest-900);background:var(--lime-500);color:var(--forest-900);border:0;
 box-shadow:0 0 0 1px rgba(11,31,25,.12),0 24px 48px rgba(0,0,0,.25)}
.plan-cards .featured .price{font-size:88px}
.plan-cards .featured li:before{color:var(--forest-900)}
.plan-cards .featured .button{background:var(--forest-900);color:var(--lime-500);border-color:var(--forest-900)}
.plan-cards .featured .button:hover{background:var(--forest-700)}
.pricing-page .plan-cards .pricing-card:not(.featured) :is(button,.button){background:transparent;color:var(--color-text);border:1px solid var(--color-border-strong)}
.pricing-page .plan-cards .pricing-card:not(.featured) .button:hover{background:var(--color-surface-raised);text-decoration:none}
.pack-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:var(--space-3) var(--space-6);margin-bottom:var(--space-8)}
.pack-row > p{grid-column:1;margin:0;color:var(--color-text-muted)}
.pack-row #packs{grid-column:1;scroll-margin-top:var(--space-9)}
.pack-cards{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.pack-cards .pricing-card{padding:var(--space-4) var(--space-5);gap:var(--space-1);border-radius:18px;background:transparent}
.pack-cards .pricing-card > strong{font-size:12px;font-weight:600}
.pack-cards .price{font-size:48px}
.pack-cards .hint{margin:0}
.price-rules{max-width:760px;margin-bottom:var(--space-7)}
.price-rules ol{display:grid;gap:var(--space-2);margin:0;padding-inline-start:var(--space-5);color:var(--color-text-muted);line-height:1.9}
html[lang=ar] .price-rules ol{list-style:arabic-indic}
.price-jobs{border-block:1px solid var(--color-border);margin-bottom:var(--space-7)}
.price-jobs summary{display:flex;align-items:center;gap:var(--space-4);min-height:64px;cursor:pointer;list-style:none}
.price-jobs summary::-webkit-details-marker{display:none}
.price-jobs summary h2{margin:0}
.price-jobs summary span{flex:1;font-size:13px;color:var(--color-text-muted)}
.price-jobs summary svg{transition:transform var(--duration-fast,120ms) var(--ease-standard,ease)}
.price-jobs[open] summary svg{transform:rotate(180deg)}
.price-jobs .hint{margin:var(--space-2) 0}
.price-jobs .hint:last-child{margin-bottom:var(--space-5)}
.costs-scroll{overflow-x:auto;margin:var(--space-2) 0}
.costs-table{width:100%;border-collapse:collapse;font-size:13px}
.costs-table th,.costs-table td{padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border);text-align:start;vertical-align:middle}
.costs-table thead th{font-size:12px;font-weight:500;color:var(--color-text-muted);border-top:0}
.costs-table tbody th{font-weight:500}
.costs-table td:nth-child(n+3){text-align:end;white-space:nowrap;font:400 22px/1 var(--studio-display-font,'Lalezar',Tahoma,sans-serif);font-variant-numeric:tabular-nums}
.price-why{max-width:720px}
.price-why p{color:var(--color-text-muted);line-height:1.9}
.price-why a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:999px) and (min-width:561px){.plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.pack-row{grid-template-columns:1fr}.pack-cards{grid-column:1;grid-row:auto}}
@media(max-width:560px){
 .pricing-page{padding-block:var(--space-5) var(--space-7)}
 .price-head{gap:var(--space-3);margin-bottom:var(--space-4)}
 .price-head h1,html[lang=en] .price-head h1{font-size:36px}
 .price-stamp{font-size:15px;padding:2px var(--space-3)}
 .plan-cards{grid-template-columns:1fr;gap:var(--space-3);margin-bottom:var(--space-6)}
 .plan-cards .pricing-card{aspect-ratio:auto;border-radius:24px;padding:var(--space-4);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-1) var(--space-4)}
 .plan-cards .pricing-card > strong{grid-column:1;grid-row:1}
 .plan-cards .price,.plan-cards .featured .price{grid-column:2;grid-row:1 / span 2;margin:0;font-size:56px}
 .plan-cards .featured .price{font-size:48px}
 .plan-cards .pricing-card > .hint{grid-column:1;grid-row:2}
 .plan-cards .pricing-card ul{grid-column:1 / -1;grid-template-columns:1fr 1fr;margin:var(--space-1) 0}
 .plan-cards .pricing-card :is(button,.button){grid-column:1 / -1}
 .pack-cards{gap:var(--space-3)}
 .pack-cards .price{font-size:36px}
 .price-jobs summary span{display:none}
 .costs-table th,.costs-table td{padding:var(--space-2) var(--space-1)}
 .costs-table thead th{line-height:1.5}
 .costs-table tbody th{min-width:112px}
 .costs-table td:nth-child(2){font-size:12px;line-height:1.5}
 .costs-table td:nth-child(n+3){font-size:18px}
}