/* =========================================================
   SCRIPTFLUENCE MOBILE V1
   Shared phone-first responsive layer
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
.sf-mobile-bottom-nav,.sf-mobile-more-overlay{display:none}
@media(max-width:760px){
  :root{--sf-mobile-nav-h:68px}
  body{font-size:16px;-webkit-text-size-adjust:100%}
  body.sf-has-mobile-nav{padding-bottom:calc(var(--sf-mobile-nav-h) + max(16px,env(safe-area-inset-bottom)))}
  input,select,textarea,button{font-size:16px} /* prevents iOS auto zoom */
  input,select,textarea{max-width:100%}
  button,a[role="button"],.button,.primary,.secondary{min-height:44px}
  .container{width:min(100% - 24px,1180px)!important}

  /* App shells */
  .sidebar,.studio-sidebar{display:none!important}
  .main,.studio-main{margin-left:0!important;width:100%!important;min-width:0!important}
  .content,.studio-content{padding-left:14px!important;padding-right:14px!important;padding-bottom:calc(var(--sf-mobile-nav-h) + 28px)!important}
  .topbar,.studio-topbar{
    min-height:62px!important;height:auto!important;padding:10px 14px!important;
    gap:10px!important;position:sticky!important;top:0!important;z-index:45!important;
    background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px)
  }
  .topbar-title,.page-name,.studio-page-name{font-size:16px!important;line-height:1.2!important}
  .topbar-sub,.page-kicker{display:none!important}
  .top-actions,.studio-top-actions{gap:6px!important}
  .top-actions>a:not(.primary),.studio-top-actions>a:not(.primary){display:none!important}

  /* Common grids and forms */
  .grid,.form-grid,.two-col,.account-grid,.lower-grid,.join-card,.demo-grid,
  .hero-grid,.split-grid,.result-grid,.plan-columns,.benefit-grid,.four-steps,
  .workflow-strip,.quick-grid,.os-grid{grid-template-columns:1fr!important}
  .field.full{grid-column:auto!important}
  .card,.panel,.generator-card{max-width:100%}
  table{font-size:13px}
  .table-wrap,.seo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Mobile bottom navigation injected by mobile-nav.js */
  .sf-mobile-bottom-nav{
    display:grid!important;
    position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));
    z-index:90;height:58px;display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(7,23,47,.96);border:1px solid rgba(255,255,255,.12);
    border-radius:16px;box-shadow:0 12px 40px rgba(4,13,29,.28);
    backdrop-filter:blur(16px);overflow:hidden
  }
  .sf-mobile-bottom-nav a{
    color:#9eb0c6;text-decoration:none;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;font-size:8px;font-weight:800;min-width:0
  }
  .sf-mobile-bottom-nav a b{font-size:17px;line-height:1;color:#cbd7e7}
  .sf-mobile-bottom-nav a.active{color:#fff;background:rgba(36,124,255,.18)}
  .sf-mobile-bottom-nav a.active b{color:#5ea0ff}

  .sf-mobile-more-overlay{
    display:none;position:fixed;inset:0;z-index:110;
    background:rgba(3,10,20,.52);backdrop-filter:blur(5px)
  }
  .sf-mobile-more-overlay.open{display:block!important}
  .sf-mobile-more-sheet{
    position:absolute;left:8px;right:8px;bottom:max(74px,calc(66px + env(safe-area-inset-bottom)));
    background:#fff;border:1px solid #dde6f1;border-radius:18px;
    box-shadow:0 24px 70px rgba(4,13,29,.3);padding:10px;overflow:hidden
  }
  .sf-mobile-more-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 8px 10px;font-size:12px;font-weight:900;color:#07172f
  }
  .sf-mobile-more-close{
    width:36px;height:36px;min-height:36px!important;border:0;border-radius:10px;
    background:#f1f5f9;color:#334155;font-size:20px
  }
  .sf-mobile-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .sf-mobile-more-grid a{
    min-height:48px;display:flex;align-items:center;gap:9px;padding:10px 11px;
    border:1px solid #e4eaf2;border-radius:11px;background:#f8fafc;
    color:#24354d;text-decoration:none;font-size:11px;font-weight:850
  }
  .sf-mobile-more-grid a b{color:#247cff;font-size:15px;width:18px;text-align:center}
  .mobile-menu{display:none!important}


  /* Cards */
  .hero h1,.intro h1{overflow-wrap:anywhere}
  .section-head{margin-bottom:28px!important}
  .section{padding-top:62px!important;padding-bottom:62px!important}
}

/* Landing page — phone-first */
@media(max-width:700px){
  .site-nav{position:sticky!important;top:0!important}
  .nav-inner{min-height:64px!important;gap:8px!important}
  .brand-word small{display:none!important}
  .brand-mark{width:38px!important;height:29px!important}
  .brand-word b,.brand-word strong{font-size:20px!important}
  .nav-actions{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important}
  .nav-actions .text-button{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:40px!important;padding:8px 9px!important;font-size:12px!important;
    font-weight:850!important;color:#334155!important;white-space:nowrap!important
  }
  .nav-actions .button-small{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:40px!important;font-size:11px!important;padding:8px 10px!important;white-space:nowrap!important
  }
  .hero{overflow:hidden!important}
  .hero-grid{grid-template-columns:1fr!important;gap:28px!important;padding:34px 0 42px!important}
  .hero h1{font-size:clamp(40px,12vw,52px)!important;line-height:1!important;margin:16px 0!important}
  .hero-lead{font-size:16px!important;line-height:1.55!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .hero-actions .button{width:100%!important}
  .hero-how-link{display:block!important;text-align:center!important;margin-top:12px!important}
  .hero-clarity{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .hero-clarity>i{display:none!important}
  .hero-product{min-height:0!important;display:block!important}
  .product-story{width:100%!important;border-radius:15px!important}
  .story-top{height:42px!important}
  .story-progress{overflow-x:auto!important;justify-content:flex-start!important;white-space:nowrap!important}
  .story-body{grid-template-columns:1fr!important}
  .story-plan{grid-row:auto!important}
  .story-film{display:block!important}
  .story-edit{display:block!important}
  .story-card{padding:10px!important}
  .plan-two{grid-template-columns:1fr!important}
  .story-caption{display:block!important}
  .story-caption span{display:block!important;margin-top:4px!important}
  .creator-strip{overflow:hidden}
  .strip-inner{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;white-space:nowrap!important;padding:0 4px}
  .workflow-grid,.audience-cards,.public-plan-grid,.plan-grid{grid-template-columns:1fr!important}
  .workflow-grid article,.audience-cards article,.plan-card{min-height:0!important}
  .split-grid,.split-grid.reverse{grid-template-columns:1fr!important;gap:32px!important}
  .film-ui,.editor-ui{width:100%!important;border-radius:14px!important}
  .film-screen{height:230px!important}
  .camera-message,.preview-message{width:84%!important}
  .camera-message strong,.preview-message strong{font-size:12px!important}
  .film-guidance{grid-template-columns:1fr!important}
  .film-controls{overflow-x:auto!important}
  .film-controls button{white-space:nowrap!important}
  .editor-monitor{grid-template-columns:1fr!important}
  .editor-side{display:block!important}
  .video-frame{height:210px!important}
  .clip-strip{height:64px!important}
  .edit-tools{overflow-x:auto!important;flex-wrap:nowrap!important}
  .edit-tools span{white-space:nowrap!important}
  .values-grid{grid-template-columns:1fr!important;gap:26px!important}
  .pricing-jump-inner{flex-direction:column!important;align-items:stretch!important}
  .pricing-jump-inner .button{width:100%!important}
  .final-inner{flex-direction:column!important;align-items:stretch!important}
  .final-button{width:100%!important}
  .footer-inner{grid-template-columns:1fr!important;text-align:center!important}
  .footer-brand{justify-content:center!important}
  .modal{padding:10px!important;align-items:end!important}
  .modal-card{width:100%!important;max-height:92dvh!important;border-radius:18px 18px 0 0!important;padding:22px 17px calc(22px + env(safe-area-inset-bottom))!important}
}

/* Choose plan */
@media(max-width:700px){
  .wrap{width:min(100% - 24px,1160px)!important;padding-top:16px!important}
  .wrap>.brand{margin-bottom:8px}
  .wrap .hero{padding:24px 0 12px!important}
  .wrap .hero h1{font-size:36px!important;letter-spacing:-1.5px!important}
  .wrap .hero p{font-size:14px!important}
  .trust-row{justify-content:flex-start!important;gap:8px!important}
  .plans{grid-template-columns:1fr!important;gap:14px!important}
  .plans .card{padding:22px!important}
  .plans .card.featured{order:0!important}
  .price{font-size:36px!important}
}

/* Creator Studio app pages */
@media(max-width:760px){
  .hero-main{padding:22px 18px!important}
  .hero h1{font-size:30px!important;line-height:1.06!important}
  .intro h1{font-size:30px!important}
  .workflow-strip,.voice-progress-strip{grid-template-columns:1fr!important}
  .roadmap-flow{overflow-x:auto!important;flex-wrap:nowrap!important}
  .roadmap-flow>*{flex:0 0 auto}
  .plan-stats,.stats-grid{grid-template-columns:1fr 1fr!important}
  .toolbar-v2{align-items:stretch!important;flex-direction:column!important}
  .plan-filter{width:100%!important}
  .result-top{align-items:flex-start!important;flex-direction:column!important}
  .script-row{grid-template-columns:1fr!important}
  .script-row>div+div{border-left:0!important;border-top:1px solid var(--line,#e5eaf1)!important}
  .early-access{padding:26px 20px!important}
  .account-grid{grid-template-columns:1fr!important}
  .profile-row{grid-template-columns:1fr!important;gap:5px!important}
}

/* Filming Studio */
@media(max-width:760px){
  .filming-shell,.studio-page,main{max-width:100%!important}
  .picker{padding:12px!important}
  .platform-grid,.mode-grid{grid-template-columns:1fr!important}
  .platform-card,.mode-card{min-height:0!important}
  .full-record-panel,.recording-shell,.free-film-panel{max-width:100%!important}
  .full-camera,.camera-stage,.free-camera{width:100%!important;max-height:none!important}
  .full-camera.format-vertical,.camera-stage.format-vertical,.free-camera.format-vertical{
    width:min(72vw,340px)!important;height:auto!important;aspect-ratio:9/16!important;margin-inline:auto!important
  }
  .full-camera.format-square,.camera-stage.format-square,.free-camera.format-square{
    width:min(88vw,430px)!important;height:auto!important;aspect-ratio:1/1!important;margin-inline:auto!important
  }
  .full-camera.format-landscape,.camera-stage.format-landscape,.free-camera.format-landscape{
    width:100%!important;height:auto!important;aspect-ratio:16/9!important
  }
  .below-guidance{padding:10px!important}
  .below-guidance .guide-grid{grid-template-columns:1fr!important}
  .guide-card{padding:10px!important}
  .guide-say{font-size:16px!important;line-height:1.38!important}
  .full-controls,.record-controls,.free-controls{
    position:sticky!important;bottom:0!important;z-index:40!important;
    padding:9px!important;padding-bottom:max(9px,env(safe-area-inset-bottom))!important;
    background:rgba(7,19,38,.97)!important;gap:7px!important;overflow-x:auto!important
  }
  .full-controls button,.record-controls button,.free-controls button{min-height:44px!important;white-space:nowrap!important}
}

/* Film-session editor */
@media(max-width:620px){
  .pe-top{height:auto!important;min-height:58px!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:7px!important}
  .pe-top-center{text-align:left!important;min-width:0!important}
  .pe-top-center strong{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .pe-top-right{display:flex!important}
  .pe-top-right .pe-btn{min-height:38px!important;padding:7px 8px!important;font-size:9px!important;white-space:nowrap!important}
  .pe-workspace{padding:8px!important;gap:8px!important}
  .pe-monitor{aspect-ratio:9/16!important;max-height:58dvh!important}
  .pe-monitor-card{max-width:min(100%,420px)!important}
  .pe-monitor-controls{overflow-x:auto!important}.pe-monitor-controls .pe-btn{white-space:nowrap!important}
  .pe-inspector{grid-template-columns:1fr!important}
  .pe-card{padding:11px!important}
  .pe-timeline-section{padding:0 8px 90px!important}
  .pe-timeline-head{align-items:flex-start!important;flex-direction:column!important}
  .pe-track-wrap{height:104px!important}
  .pe-tools{overflow-x:auto!important;flex-wrap:nowrap!important}
  .pe-tools button{white-space:nowrap!important}
  .pe-selection-info{flex:0 0 100%!important}
  .pe-footer{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    z-index:70!important;display:grid!important;grid-template-columns:1fr 1fr!important;
    padding:8px!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important
  }
  .pe-footer button{min-width:0!important;padding:9px 7px!important;font-size:9px!important}
  .export-modal{padding:0!important;align-items:end!important}
  .export-card{width:100%!important;max-height:94dvh!important;border-radius:18px 18px 0 0!important}
}

/* SEO/resources pages */
@media(max-width:700px){
  .seo-hero{padding:38px 0 44px!important}
  .seo-hero-grid,.seo-grid,.seo-steps,.seo-usecases,.seo-tips{grid-template-columns:1fr!important}
  .seo-hero h1{font-size:38px!important}
  .seo-lead{font-size:16px!important}
  .seo-section{padding:54px 0!important}
  .seo-panel,.seo-card,.seo-example-body,.seo-example-head{padding:20px!important}
}

@media(max-width:430px){
  .nav-inner{gap:5px!important}
  .brand{gap:6px!important;min-width:0!important}
  .brand-mark{width:34px!important;height:26px!important}
  .brand-word b,.brand-word strong{font-size:18px!important}
  .nav-actions{gap:3px!important}
  .nav-actions .text-button{padding:7px 6px!important;font-size:11px!important}
  .nav-actions .button-small{padding:7px 8px!important;font-size:10px!important}
}

/* =========================================================
   SCRIPTFLUENCE PHONE FILMING V4
   Dedicated camera-first experience
   ========================================================= */
@media(max-width:900px){
  body.sf-phone-filming{
    margin:0!important;
    padding:0!important;
    background:#020812!important;
    color:#fff!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body.sf-phone-filming .sf-mobile-bottom-nav,
  body.sf-phone-filming .sf-mobile-more-overlay{
    display:none!important;
  }

  body.sf-phone-filming .session-topbar{
    position:fixed!important;
    top:0;left:0;right:0;
    z-index:160!important;
    height:56px!important;
    min-height:56px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:calc(6px + env(safe-area-inset-top)) 9px 6px!important;
    background:rgba(3,11,23,.94)!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    backdrop-filter:blur(15px)!important;
  }

  body.sf-phone-filming .session-exit,
  body.sf-phone-filming .session-settings{
    min-height:38px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:10px!important;
    padding:7px 9px!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  body.sf-phone-filming .session-center{
    min-width:0!important;
    text-align:center!important;
  }

  body.sf-phone-filming .session-product{
    display:block!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.sf-phone-filming .session-meta{
    display:block!important;
    margin-top:2px!important;
    color:#8fa5c2!important;
    font-size:8px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.sf-phone-filming .session-workspace{
    position:fixed!important;
    inset:56px 0 0!important;
    z-index:20!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#020812!important;
  }

  /* Remove every desktop/setup surface while filming. */
  body.sf-phone-filming .session-workspace aside,
  body.sf-phone-filming .session-workspace .top,
  body.sf-phone-filming .session-workspace .picker,
  body.sf-phone-filming .session-workspace #studio,
  body.sf-phone-filming .session-workspace .platform-setup,
  body.sf-phone-filming .session-workspace .format-summary,
  body.sf-phone-filming .session-workspace .mode-choice,
  body.sf-phone-filming .session-workspace .active-mode-bar,
  body.sf-phone-filming .session-workspace .mode-note,
  body.sf-phone-filming .session-workspace .studio-toolbar,
  body.sf-phone-filming .session-workspace .finished-card{
    display:none!important;
  }

  body.sf-phone-filming .session-workspace .shell,
  body.sf-phone-filming .session-workspace main,
  body.sf-phone-filming .session-workspace .wrap{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    background:#020812!important;
  }

  body.sf-phone-filming .full-record-panel.open,
  body.sf-phone-filming .recording-shell.open,
  body.sf-phone-filming .free-film-panel.open{
    display:flex!important;
    position:absolute!important;
    inset:0!important;
    z-index:30!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#020812!important;
    overflow:hidden!important;
  }

  body.sf-phone-filming .full-head,
  body.sf-phone-filming .recording-head,
  body.sf-phone-filming .free-head{
    flex:0 0 44px!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:6px 10px!important;
    background:#061224!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
  }

  body.sf-phone-filming .full-head strong,
  body.sf-phone-filming .recording-title,
  body.sf-phone-filming .free-head strong{
    color:#fff!important;
    font-size:11px!important;
    font-weight:900!important;
  }

  body.sf-phone-filming .shoot-head-actions{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
  }

  body.sf-phone-filming .recording-status,
  body.sf-phone-filming .shoot-head-actions>span{
    color:#91a6c2!important;
    font-size:8px!important;
  }

  body.sf-phone-filming .camera-flip-btn{
    min-height:34px!important;
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:10px!important;
    padding:6px 9px!important;
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:900!important;
  }

  /* Camera stage */
  body.sf-phone-filming .full-camera,
  body.sf-phone-filming .camera-stage,
  body.sf-phone-filming .free-camera{
    position:relative!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    background:#000!important;
    overflow:hidden!important;
  }

  body.sf-phone-filming .full-camera video,
  body.sf-phone-filming .camera-stage video,
  body.sf-phone-filming .free-camera video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    background:#000!important;
  }

  /* Preserve the selected capture shape in portrait. */
  body.sf-phone-filming .full-camera.format-vertical,
  body.sf-phone-filming .camera-stage.format-vertical,
  body.sf-phone-filming .free-camera.format-vertical{
    flex:1 1 auto!important;
    width:min(100%,430px)!important;
    aspect-ratio:9/16!important;
    margin-inline:auto!important;
  }

  body.sf-phone-filming .full-camera.format-square,
  body.sf-phone-filming .camera-stage.format-square,
  body.sf-phone-filming .free-camera.format-square{
    flex:0 1 auto!important;
    width:100%!important;
    aspect-ratio:1/1!important;
    max-height:48dvh!important;
    margin-inline:auto!important;
  }

  body.sf-phone-filming .full-camera.format-landscape,
  body.sf-phone-filming .camera-stage.format-landscape,
  body.sf-phone-filming .free-camera.format-landscape{
    flex:0 1 auto!important;
    width:100%!important;
    aspect-ratio:16/9!important;
    max-height:42dvh!important;
  }

  body.sf-phone-filming .frame-guide::before{
    inset:4%!important;
  }

  body.sf-phone-filming .platform-pill,
  body.sf-phone-filming .record-badge,
  body.sf-phone-filming .free-rec,
  body.sf-phone-filming .full-progress .pill{
    font-size:8px!important;
    padding:5px 7px!important;
  }

  body.sf-phone-filming .full-progress{
    top:8px!important;left:8px!important;right:8px!important;
  }

  /* Script guidance: readable, but never dominates the camera. */
  body.sf-phone-filming .below-guidance{
    flex:0 0 auto!important;
    max-height:23dvh!important;
    overflow:auto!important;
    padding:7px 9px!important;
    background:#071326!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
  }

  body.sf-phone-filming .below-guidance .guide-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }

  body.sf-phone-filming .guide-card{
    padding:7px 9px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:10px!important;
    background:#0b203b!important;
  }

  body.sf-phone-filming .guide-label{
    margin-bottom:2px!important;
    color:#7fb0ff!important;
    font-size:7px!important;
    letter-spacing:.12em!important;
  }

  body.sf-phone-filming .guide-say{
    color:#fff!important;
    font-size:13px!important;
    line-height:1.28!important;
    font-weight:780!important;
  }

  body.sf-phone-filming .guide-show{
    color:#b8c9dd!important;
    font-size:9px!important;
    line-height:1.32!important;
  }

  body.sf-phone-filming .guide-up-next{
    margin-top:4px!important;
    padding:5px 7px!important;
    font-size:8px!important;
  }

  body.sf-phone-filming .free-plan-nav{
    margin-top:6px!important;
  }

  body.sf-phone-filming .free-plan-nav button{
    min-height:34px!important;
    padding:5px 7px!important;
    font-size:8px!important;
  }

  body.sf-phone-filming .free-scene-meta{
    font-size:8px!important;
  }

  body.sf-phone-filming .hf-progress-track{
    flex:0 0 3px!important;
  }

  body.sf-phone-filming .hf-strip{
    flex:0 0 auto!important;
    padding:5px 8px!important;
    background:#061224!important;
    border:0!important;
  }

  body.sf-phone-filming .hf-strip>div:first-child{
    display:none!important;
  }

  body.sf-phone-filming .hf-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    gap:5px!important;
  }

  body.sf-phone-filming .hf-actions button{
    min-height:34px!important;
    padding:5px 7px!important;
    font-size:8px!important;
  }

  /* Bottom controls: one obvious primary record action. */
  body.sf-phone-filming .full-controls,
  body.sf-phone-filming .record-controls,
  body.sf-phone-filming .free-controls{
    position:relative!important;
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    width:100%!important;
    padding:7px 9px max(9px,env(safe-area-inset-bottom))!important;
    margin:0!important;
    background:#030d1b!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    overflow:visible!important;
  }

  body.sf-phone-filming .full-controls button,
  body.sf-phone-filming .record-controls button,
  body.sf-phone-filming .free-controls button{
    min-height:42px!important;
    border-radius:11px!important;
    padding:7px 8px!important;
    font-size:9px!important;
    font-weight:900!important;
    white-space:normal!important;
  }

  body.sf-phone-filming #fullEnableBtn,
  body.sf-phone-filming #enableCameraBtn,
  body.sf-phone-filming #freeEnableBtn,
  body.sf-phone-filming #fullRecordBtn,
  body.sf-phone-filming #recordBtn,
  body.sf-phone-filming #freeRecordBtn{
    grid-column:1 / -1!important;
    min-height:54px!important;
    border-radius:14px!important;
    font-size:12px!important;
    font-weight:950!important;
  }

  body.sf-phone-filming #fullCloseBtn,
  body.sf-phone-filming #closeRecorderBtn,
  body.sf-phone-filming #freeCloseBtn{
    display:none!important;
  }

  body.sf-phone-filming .review-bar,
  body.sf-phone-filming .free-review{
    flex:0 0 auto!important;
    display:none!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    padding:7px 9px max(9px,env(safe-area-inset-bottom))!important;
    background:#030d1b!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
  }

  body.sf-phone-filming .review-bar.show,
  body.sf-phone-filming .free-review.show{
    display:grid!important;
  }

  body.sf-phone-filming .review-bar button,
  body.sf-phone-filming .free-review button{
    min-height:50px!important;
    border-radius:12px!important;
    font-size:10px!important;
    font-weight:900!important;
  }

  body.sf-phone-filming .privacy-note{
    display:none!important;
  }

  /* Settings / exit are phone bottom sheets. */
  body.sf-phone-filming .session-change-panel,
  body.sf-phone-filming .session-exit-modal{
    position:fixed!important;
    inset:0!important;
    z-index:220!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding:0!important;
    background:rgba(2,8,18,.66)!important;
    backdrop-filter:blur(8px)!important;
  }

  body.sf-phone-filming .session-change-card,
  body.sf-phone-filming .session-exit-card{
    width:100%!important;
    max-width:none!important;
    max-height:88dvh!important;
    overflow:auto!important;
    margin:0!important;
    border-radius:20px 20px 0 0!important;
    padding:20px 16px max(20px,env(safe-area-inset-bottom))!important;
  }

  body.sf-phone-filming .session-change-grid{
    grid-template-columns:1fr!important;
  }

  body.sf-phone-filming .session-change-actions,
  body.sf-phone-filming .session-exit-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }

  /* Non-blocking landscape reminder. */
  body.sf-phone-filming .sf-landscape-banner{
    display:none;
    position:fixed;
    left:10px;right:10px;
    top:calc(60px + env(safe-area-inset-top));
    z-index:190;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 11px;
    border:1px solid rgba(94,160,255,.28);
    border-radius:12px;
    background:rgba(7,25,48,.96);
    box-shadow:0 12px 34px rgba(0,0,0,.32);
    color:#dce9fa;
    font-size:10px;
    line-height:1.35;
  }

  body.sf-phone-filming .sf-landscape-banner.show{
    display:flex!important;
  }

  body.sf-phone-filming .sf-landscape-banner b{
    color:#7fb0ff;
  }

  body.sf-phone-filming .sf-landscape-banner button{
    min-width:34px;
    min-height:34px;
    border:0;
    border-radius:9px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:17px;
  }

  /* Review / finish becomes its own full phone screen. */
  body.sf-phone-filming .review-finish.open{
    position:fixed!important;
    inset:56px 0 0!important;
    z-index:130!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow-y:auto!important;
    background:#f5f8fc!important;
    color:#14233b!important;
  }

  body.sf-phone-filming .rf-head{
    padding:14px!important;
  }

  body.sf-phone-filming .rf-head h2{
    font-size:20px!important;
  }

  body.sf-phone-filming .rf-body{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:10px!important;
  }

  body.sf-phone-filming .rf-player{
    min-height:0!important;
    width:100%!important;
    max-height:58dvh!important;
    aspect-ratio:9/16!important;
    border-radius:14px!important;
  }

  body.sf-phone-filming .rf-actions{
    position:sticky!important;
    bottom:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    padding:8px 10px max(10px,env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(12px)!important;
  }

  body.sf-phone-filming .rf-actions button{
    min-height:46px!important;
    padding:7px!important;
    font-size:9px!important;
  }
}

/* True landscape phone layout. */
@media(max-width:900px) and (orientation:landscape){
  body.sf-phone-filming .session-topbar{
    height:46px!important;
    min-height:46px!important;
    padding:4px 8px!important;
  }

  body.sf-phone-filming .session-workspace{
    inset:46px 0 0!important;
  }

  body.sf-phone-filming .full-record-panel.open,
  body.sf-phone-filming .recording-shell.open,
  body.sf-phone-filming .free-film-panel.open{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(190px,27vw)!important;
    grid-template-rows:38px minmax(0,1fr) auto!important;
  }

  body.sf-phone-filming .full-head,
  body.sf-phone-filming .recording-head,
  body.sf-phone-filming .free-head{
    grid-column:1 / -1!important;
    grid-row:1!important;
    min-height:38px!important;
    height:38px!important;
    padding:4px 8px!important;
  }

  body.sf-phone-filming .full-camera,
  body.sf-phone-filming .camera-stage,
  body.sf-phone-filming .free-camera{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    aspect-ratio:auto!important;
  }

  body.sf-phone-filming .below-guidance{
    grid-column:2!important;
    grid-row:2!important;
    max-height:none!important;
    height:100%!important;
    border-top:0!important;
    border-left:1px solid rgba(255,255,255,.08)!important;
  }

  body.sf-phone-filming .hf-progress-track,
  body.sf-phone-filming .hf-strip{
    display:none!important;
  }

  body.sf-phone-filming .full-controls,
  body.sf-phone-filming .record-controls,
  body.sf-phone-filming .free-controls,
  body.sf-phone-filming .review-bar.show,
  body.sf-phone-filming .free-review.show{
    grid-column:1 / -1!important;
    grid-row:3!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:5px 8px max(5px,env(safe-area-inset-bottom))!important;
  }

  body.sf-phone-filming #fullEnableBtn,
  body.sf-phone-filming #enableCameraBtn,
  body.sf-phone-filming #freeEnableBtn,
  body.sf-phone-filming #fullRecordBtn,
  body.sf-phone-filming #recordBtn,
  body.sf-phone-filming #freeRecordBtn{
    grid-column:auto!important;
    min-height:40px!important;
    font-size:10px!important;
  }

  body.sf-phone-filming .sf-landscape-banner{
    display:none!important;
  }
}