/* ==========================================================
   2P STUDIO — RESPONSIVE EXPERIENCE v3
   Dedicated tablet + smartphone layouts.
   Desktop (>=1101px) intentionally stays on the desktop track.
   ========================================================== */

/* Shared quality pass */
.studio-site .studio-hero__copy h1,
.studio-site .studio-section-heading h2,
.studio-site .studio-audience h2,
.studio-site .studio-promise h2{
  text-wrap:balance;
}
.studio-site .studio-hero__lead,
.studio-site .studio-section-heading>p,
.studio-site .studio-audience__grid>div>p,
.studio-site .studio-promise__card>div>p{
  text-wrap:pretty;
}
.studio-mobile-dock{display:none}

/* Use the actual 2P site logo, not a fabricated mark. */
.studio-brand__logo,
.trial-studio__logo{
  object-fit:contain;
  object-position:center;
}

/* Refined phone shell: keep the Reel visible but restore a real device silhouette. */
.studio-phone{
  width:min(278px,76%);
  aspect-ratio:9/19.5;
  padding:8px;
  border-radius:42px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,#2a3039 0%,#11151b 35%,#030507 100%);
  box-shadow:
    0 30px 72px rgba(0,0,0,.52),
    0 0 0 1px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
.studio-phone::before{
  content:"";
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:78px;
  height:22px;
  border-radius:999px;
  background:#020305;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 3px rgba(0,0,0,.6);
  z-index:5;
}
.studio-phone::after{
  content:"";
  position:absolute;
  right:-4px;
  top:94px;
  width:3px;
  height:58px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#626b76,#20252c);
  box-shadow:-1px 74px 0 #2a3037;
  opacity:.95;
}
.studio-phone video{
  inset:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  border-radius:34px;
}
.studio-phone__shade{inset:8px;border-radius:34px}
.studio-phone__badge{left:21px;bottom:21px;z-index:4}

/* Touch is a different interaction model, not just a smaller viewport. */
@media (any-pointer:coarse){
  .studio-site button,
  .studio-site a,
  .trial-studio button,
  .trial-studio input,
  .trial-studio textarea,
  .trial-studio select,
  .p2-lang__button,
  .p2-lang__option{
    min-height:48px;
  }
}

/* ==========================================================
   TABLET / SMALL TOUCH SCREENS — 721px to 1100px
   Centered product story, 2-column supporting content.
   ========================================================== */
@media (min-width:721px) and (max-width:1100px){
  :root{--studio-shell:min(900px,calc(100vw - 56px))}

  .studio-header{
    background:rgba(7,16,28,.86);
    border-bottom-color:rgba(255,255,255,.08);
  }
  .studio-nav{
    width:var(--studio-shell);
    min-height:72px!important;
    gap:18px;
  }
  .studio-brand{gap:9px}
  .studio-brand__logo{height:42px!important;width:auto}
  .studio-brand__word{font-size:12px;letter-spacing:.18em}
  .studio-nav__links{gap:10px!important}
  .studio-nav__links>a{display:none!important}
  .studio-nav__cta{min-height:44px;padding:0 15px}
  .studio-header .p2-lang{margin-left:0}
  .studio-header .p2-lang__button{min-height:44px!important;padding:0 12px!important}

  .studio-hero{
    padding:58px 0 72px;
    min-height:auto;
  }
  .studio-hero__grid{
    grid-template-columns:1fr!important;
    gap:46px!important;
  }
  .studio-hero__copy{
    max-width:860px;
    margin:0 auto;
    text-align:center;
  }
  .studio-kicker{font-size:11px;letter-spacing:.17em;margin-bottom:14px}
  .studio-hero__copy h1{
    max-width:860px;
    margin:0 auto 22px;
    font-size:clamp(54px,8.2vw,76px);
    line-height:.95;
    letter-spacing:-.055em;
  }
  .studio-hero__lead{
    max-width:700px;
    margin:0 auto 26px;
    font-size:clamp(18px,2.4vw,22px);
    line-height:1.55;
  }
  .studio-hero__actions{justify-content:center;gap:14px}
  .studio-primary{min-height:52px}
  .studio-hero__note{max-width:360px;text-align:left}
  .studio-proof-strip{justify-content:center;margin-top:24px}

  .studio-hero__visual{justify-content:center}
  .studio-visual-card{
    width:min(480px,74vw);
    padding:18px 18px 16px;
    border-radius:28px;
  }
  .studio-phone{width:min(270px,64%)}

  .studio-problem,.studio-process,.studio-audience{padding:78px 0}
  .studio-section-heading,
  .studio-section-heading--center{
    display:block;
    max-width:760px;
    margin:0 auto 38px;
    text-align:center;
  }
  .studio-section-heading h2,.studio-audience h2,.studio-promise h2{
    font-size:clamp(38px,5.8vw,56px);
  }
  .studio-section-heading>p{max-width:650px;margin:18px auto 0}

  .studio-problem-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .studio-problem-grid article{
    min-height:210px;
    padding:26px;
    text-align:center;
  }
  .studio-problem-grid article:last-child{grid-column:1/-1;min-height:0}
  .studio-problem-grid article>span{margin-bottom:28px}

  .studio-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .studio-process-grid article{
    min-height:210px;
    padding:26px;
    text-align:center;
    border:1px solid var(--studio-line);
    border-radius:18px;
  }
  .studio-step-icon{margin:0 auto 26px}

  .studio-audience__grid{grid-template-columns:1fr!important;gap:34px!important;text-align:center}
  .studio-audience__grid>div>p{max-width:660px;margin:18px auto 0}
  .studio-audience-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;width:100%;margin:0 auto}
  .studio-audience-list span{text-align:center}

  .studio-promise{padding:72px 0 92px}
  .studio-promise__card{
    max-width:860px;
    margin:0 auto;
    align-items:center!important;
    flex-direction:column!important;
    text-align:center;
    padding:38px;
  }
  .studio-promise__card>div>p{max-width:660px;margin:18px auto 0}
  .studio-primary--large{min-width:260px;justify-content:center}

  .studio-footer__inner{
    min-height:100px;
    justify-content:center;
    flex-direction:column;
    gap:12px;
    text-align:center;
    padding:20px 0;
  }
  .studio-footer__brand{justify-content:center}
  .studio-footer__links{justify-content:center}

  /* Tablet 2P Studio workspace: centered and roomy, not desktop squeezed down. */
  .trial-studio{padding:12px!important}
  .trial-studio__panel{
    width:calc(100vw - 24px)!important;
    height:calc(100dvh - 24px)!important;
    max-height:none!important;
    border-radius:24px!important;
  }
  .trial-studio__topbar{
    min-height:70px!important;
    padding:8px 16px!important;
  }
  .trial-studio__identity{gap:10px!important}
  .trial-studio__logo{width:46px!important;height:46px!important}
  .trial-studio .trial-form--questions{
    width:min(760px,100%)!important;
    margin:0 auto!important;
    padding:18px 34px calc(24px + env(safe-area-inset-bottom))!important;
  }
  .trial-studio .trial-question-screen .trial-step-heading{
    max-width:680px;
    margin:0 auto 20px!important;
    text-align:center!important;
  }
  .trial-studio .trial-question-input,
  .trial-studio .trial-choice-grid,
  .trial-studio .trial-question-wrap--upload .trial-upload-scroll,
  .trial-studio .trial-question-wrap--review .trial-finish-grid{
    width:100%;
    max-width:700px;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .trial-studio .trial-step-actions{max-width:700px;width:100%;margin-left:auto!important;margin-right:auto!important}
}

/* ==========================================================
   SMARTPHONE — <=720px
   Product-first, centered, thumb-friendly, modern conversion flow.
   ========================================================== */
@media (max-width:720px){
  :root{--studio-shell:calc(100vw - 32px)}
  body.studio-site{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}

  .studio-header{
    position:sticky;
    top:0;
    background:rgba(7,16,28,.9);
    backdrop-filter:blur(20px) saturate(130%);
  }
  .studio-nav{
    position:relative;
    width:calc(100vw - 28px)!important;
    min-height:64px!important;
    justify-content:center!important;
    padding:0!important;
  }
  .studio-brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    gap:7px;
    margin:0;
  }
  .studio-brand__logo{height:34px!important;width:auto!important;filter:none!important}
  .studio-brand__word{display:inline!important;font-size:10px!important;letter-spacing:.16em!important}
  .studio-nav__links{position:static!important;display:block!important}
  .studio-nav__links>a,
  .studio-nav__cta{display:none!important}
  .studio-header .p2-lang--desktop{
    display:inline-flex!important;
    position:absolute!important;
    right:0;
    top:50%;
    transform:translateY(-50%);
    margin:0!important;
  }
  .studio-header .p2-lang__button{
    min-width:48px!important;
    min-height:42px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    justify-content:center;
  }
  .studio-header .p2-lang__menu{right:0!important;left:auto!important;grid-template-columns:repeat(2,1fr)!important;min-width:156px!important}

  .studio-hero{
    padding:40px 0 56px!important;
    overflow:hidden;
  }
  .studio-hero::before{
    content:"";
    position:absolute;
    top:-130px;
    left:50%;
    width:420px;
    height:420px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(47,124,255,.18),transparent 66%);
    pointer-events:none;
  }
  .studio-hero__grid{display:block!important}
  .studio-hero__copy{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:560px;
    margin:0 auto;
  }
  .studio-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    margin:0 auto 15px;
    padding:0 11px;
    border:1px solid rgba(96,162,255,.22);
    border-radius:999px;
    background:rgba(47,124,255,.07);
    font-size:9px!important;
    letter-spacing:.14em!important;
  }
  .studio-hero__copy h1{
    max-width:520px;
    margin:0 auto 20px!important;
    font-size:clamp(46px,13.4vw,62px)!important;
    line-height:.93!important;
    letter-spacing:-.058em!important;
  }
  .studio-hero__lead{
    max-width:500px;
    margin:0 auto 24px!important;
    font-size:16.5px!important;
    line-height:1.55!important;
    color:#bdcada!important;
  }
  .studio-hero__actions{
    width:100%;
    max-width:430px;
    margin:0 auto;
    display:flex!important;
    align-items:center!important;
    flex-direction:column!important;
    gap:11px!important;
  }
  .studio-primary{
    width:100%!important;
    max-width:380px;
    min-height:54px!important;
    justify-content:center!important;
    gap:12px!important;
    border-radius:15px!important;
    font-size:14px!important;
  }
  .studio-hero__note{
    display:block;
    max-width:330px;
    text-align:center!important;
    font-size:11.5px!important;
    line-height:1.45;
  }
  .studio-proof-strip{
    justify-content:center!important;
    margin:24px auto 0!important;
    max-width:380px;
    gap:7px!important;
  }
  .studio-proof-strip span{
    padding:7px 10px!important;
    font-size:10.5px!important;
  }

  .studio-hero__visual{
    margin-top:34px;
    justify-content:center!important;
  }
  .studio-visual-card{
    width:min(100%,370px)!important;
    padding:13px 13px 14px!important;
    border-radius:24px!important;
    background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
  }
  .studio-visual-card__top{
    justify-content:center;
    margin:2px 0 12px!important;
    font-size:8.5px!important;
  }
  .studio-phone{width:min(238px,70vw)!important}
  .studio-visual-card>p{font-size:11.5px!important;margin-top:13px!important}

  .studio-problem,.studio-process,.studio-audience{padding:62px 0!important}
  .studio-section-heading,
  .studio-section-heading--center,
  .studio-audience__grid>div,
  .studio-promise__card>div{
    display:block!important;
    text-align:center!important;
    max-width:520px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .studio-section-heading{margin-bottom:28px!important}
  .studio-section-heading--center{margin-bottom:30px!important}
  .studio-section-heading h2,.studio-audience h2,.studio-promise h2{
    font-size:clamp(36px,10.5vw,48px)!important;
    line-height:.98!important;
    letter-spacing:-.048em!important;
  }
  .studio-section-heading>p,
  .studio-audience__grid>div>p,
  .studio-promise__card>div>p{
    max-width:470px!important;
    margin:16px auto 0!important;
    font-size:15px!important;
    line-height:1.62!important;
  }

  .studio-problem-grid,
  .studio-process-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .studio-problem-grid article,
  .studio-process-grid article{
    min-height:0!important;
    padding:24px 20px!important;
    border:1px solid var(--studio-line)!important;
    border-radius:18px!important;
    text-align:center!important;
    background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.018))!important;
  }
  .studio-problem-grid article:last-child{grid-column:auto!important}
  .studio-problem-grid article>span{margin-bottom:18px!important}
  .studio-step-icon{margin:0 auto 19px!important}
  .studio-problem-grid h3,.studio-process-grid h3{font-size:19px!important}
  .studio-problem-grid p,.studio-process-grid p{font-size:13.5px!important;line-height:1.58!important}

  .studio-audience__grid{grid-template-columns:1fr!important;gap:26px!important}
  .studio-audience-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .studio-audience-list span{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:13px 10px!important;
    text-align:center;
    font-size:12.5px!important;
    line-height:1.3;
  }

  .studio-promise{padding:56px 0 72px!important}
  .studio-promise__card{
    display:block!important;
    padding:28px 20px!important;
    border-radius:22px!important;
    text-align:center!important;
  }
  .studio-primary--large{margin-top:24px!important;max-width:none!important}

  .studio-footer__inner{
    min-height:0!important;
    padding:24px 0 28px!important;
    align-items:center!important;
    flex-direction:column!important;
    gap:12px!important;
    text-align:center;
  }
  .studio-footer__brand{align-items:center!important;flex-direction:column!important;gap:4px!important}
  .studio-footer__links{justify-content:center!important;gap:12px!important}

  /* Sticky mobile CTA: intentionally mobile-only. */
  .studio-mobile-dock{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:860;
    display:flex;
    justify-content:center;
    pointer-events:none;
  }
  .studio-mobile-dock__button{
    width:min(100%,430px);
    min-height:58px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(47,124,255,.98),rgba(27,88,211,.98));
    color:#fff;
    box-shadow:0 16px 42px rgba(0,0,0,.38),0 10px 30px rgba(47,124,255,.28);
    backdrop-filter:blur(18px);
    font:750 14px/1 Montserrat,sans-serif;
    pointer-events:auto;
  }
  body.trial-studio-open .studio-mobile-dock{display:none!important}

  /* Phone workspace: a full-screen product, centered—not a squashed desktop modal. */
  .trial-studio{padding:0!important}
  .trial-studio__panel{
    width:100vw!important;
    height:100dvh!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .trial-studio__topbar{
    min-height:62px!important;
    padding:7px 12px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    background:rgba(7,15,27,.94)!important;
    backdrop-filter:blur(18px)!important;
  }
  .trial-studio__identity{gap:8px!important}
  .trial-studio__logo{width:36px!important;height:36px!important;filter:none!important}
  .trial-studio__identity span{font-size:.46rem!important;letter-spacing:.14em!important}
  .trial-studio__identity strong{font-size:.9rem!important}
  .trial-studio__identity small{display:none!important}
  .trial-studio__close{width:44px!important;height:44px!important;border-radius:13px!important}
  .trial-studio__scroll{overflow:hidden!important}
  .trial-studio .trial-form--questions{
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom))!important;
  }
  .trial-studio .trial-question-progress{margin-bottom:9px!important}
  .trial-studio .trial-question-progress-copy{text-align:center!important;margin-bottom:10px!important}
  .trial-studio .trial-question-screen .trial-step-heading{
    width:100%;
    max-width:520px;
    margin:0 auto 15px!important;
    text-align:center!important;
  }
  .trial-studio .trial-question-screen .trial-step-heading>span{font-size:.5rem!important;margin-bottom:6px!important}
  .trial-studio .trial-question-screen .trial-step-heading h3{
    max-width:520px!important;
    margin:0 auto!important;
    font-size:clamp(1.48rem,7.3vw,2rem)!important;
    line-height:1.02!important;
  }
  .trial-studio .trial-question-screen .trial-step-heading p{
    display:block!important;
    max-width:430px!important;
    margin:7px auto 0!important;
    font-size:.72rem!important;
    line-height:1.42!important;
  }
  .trial-studio .trial-question-input,
  .trial-studio .trial-choice-grid,
  .trial-studio .trial-question-wrap--upload .trial-upload-scroll,
  .trial-studio .trial-question-wrap--review .trial-finish-grid{
    width:100%;
    max-width:520px;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .trial-studio .trial-question-input>span{text-align:left!important}
  .trial-studio .trial-question-input input[type=text],
  .trial-studio .trial-question-input input[type=email],
  .trial-studio .trial-question-input input[type=url]{
    height:52px!important;
    padding:0 14px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }
  .trial-studio .trial-question-input textarea{
    min-height:102px!important;
    max-height:102px!important;
    padding:13px 14px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }
  .trial-studio .trial-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .trial-studio .trial-choice-grid label>span{
    min-height:72px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:11px 10px!important;
    text-align:center;
  }
  .trial-studio .trial-question-wrap--upload .trial-dropzone{
    padding:20px 12px!important;
    border-radius:16px!important;
    text-align:center!important;
  }
  .trial-studio .trial-question-wrap--upload .trial-file-list{
    grid-template-columns:1fr!important;
    max-height:112px!important;
  }
  .trial-studio .trial-step-actions{
    width:100%;
    max-width:520px;
    margin:13px auto 0!important;
    display:flex!important;
    align-items:center!important;
    flex-direction:row!important;
    gap:8px!important;
  }
  .trial-studio .trial-step-actions .trial-back{margin-right:auto!important;min-width:64px!important}
  .trial-studio .trial-skip{min-height:44px!important}
  .trial-studio .trial-next{
    width:auto!important;
    min-width:134px!important;
    min-height:48px!important;
    padding:0 14px!important;
  }
  .trial-studio .trial-submit{
    width:auto!important;
    min-width:156px!important;
    min-height:48px!important;
  }
  .trial-studio .trial-question-wrap--review .trial-finish-grid{grid-template-columns:1fr!important}
}

@media (max-width:390px){
  :root{--studio-shell:calc(100vw - 24px)}
  .studio-brand__word{display:none!important}
  .studio-hero{padding-top:32px!important}
  .studio-hero__copy h1{font-size:clamp(42px,13vw,52px)!important}
  .studio-hero__lead{font-size:15.5px!important}
  .studio-proof-strip span{font-size:10px!important}
  .studio-audience-list{grid-template-columns:1fr!important}
  .studio-audience-list span{min-height:54px}
  .trial-studio .trial-form--questions{padding-left:12px!important;padding-right:12px!important}
  .trial-studio .trial-question-screen .trial-step-heading p{font-size:.68rem!important}
  .trial-studio .trial-choice-grid{grid-template-columns:1fr!important}
  .trial-studio .trial-choice-grid label>span{min-height:58px!important}
  .trial-studio .trial-step-actions{gap:6px!important}
  .trial-studio .trial-next{min-width:122px!important;padding-inline:11px!important;font-size:.68rem!important}
  .trial-studio .trial-submit{min-width:145px!important;font-size:.68rem!important}
}

/* Small laptops: refine density without turning them into mobile/tablet layouts. */
@media (min-width:1101px) and (max-width:1280px){
  :root{--studio-shell:min(1120px,92vw)}
  .studio-hero{padding-top:68px;padding-bottom:76px}
  .studio-hero__grid{gap:48px}
  .studio-hero__copy h1{font-size:clamp(56px,6.2vw,78px)}
  .studio-visual-card{width:min(390px,100%)}
}