/* V31 r8: desktop gets its own composition; <=720px keeps the mobile UI. */
.desktopSetupHeading{display:none}
@media (min-width:721px) and (max-width:959px){
 .homeShell{max-width:650px;padding:26px 30px 112px}
 .homeGrid{display:block}
 .homeShell .homeWelcome{margin-bottom:24px;min-height:220px;padding:28px}
 .homeShell .homeWelcome .mascotStage{width:36%;max-width:205px}
 .homeShell .homeWelcome h1{font-size:36px}
 .homeShell .homeWelcome p{font-size:14px;max-width:240px}
 .homeSetup{padding:24px;background:#fffdfedb;border:1px solid #eedce5;border-radius:26px}
}
@media (min-width:960px){
 .homeShell{max-width:1176px;padding:30px 40px 44px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand nav" "greeting greeting" "main main";align-content:start;gap:0 32px}
 .homeShell>.brand{grid-area:brand;justify-content:flex-start;font-size:26px}
 .homeShell>.brand .byGrowsia{margin-left:14px;background:transparent;border:0;border-left:1px solid #ead2de;border-radius:0;padding:5px 0 5px 14px;font-size:11px;color:#a07d8c}
 .homeNav{grid-area:nav;position:static;transform:none;inset:auto;width:auto;min-width:322px;padding:5px;gap:4px;border-radius:18px;backdrop-filter:none;background:#fffafdd9;box-shadow:0 3px 12px #872b4d05;align-self:center}
 .homeNav button{flex:1 0 auto;min-width:98px;min-height:42px;flex-direction:row;gap:8px;padding:10px 14px;font-size:12px;border-radius:13px;color:#967487}
 .homeNav button[aria-current=page]{background:#f9e4ee;color:#ae285b}
 .homeNav svg{width:18px;height:18px;stroke-width:1.7}
 .homeGreeting{grid-area:greeting;align-self:center;min-height:56px;margin:18px 0 14px;font-size:15px;color:#806173}
 .homeGreeting>span{font-weight:600}
 .homeLogout{padding:10px 14px;border-radius:12px;font-size:12px;color:#9b7b8a}
 .homeGrid{grid-area:main;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;align-items:stretch}
 .homeShell .homeWelcome{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(158px,1fr) auto auto auto;align-content:start;align-items:center;justify-items:center;gap:0;padding:30px 32px 26px;border-radius:30px;background:radial-gradient(ellipse at 45% 42%,#fffdf2 0,transparent 58%),linear-gradient(145deg,#fff5eb,#ffedf5 65%,#f3edff);border-color:#f0d7e3;box-shadow:0 9px 34px #a1446308;min-height:520px;text-align:center;overflow:hidden}
 .homeWelcomeText{display:contents}
 .homeShell .homeWelcome .homeEyebrow{grid-row:1;font-size:10px;font-weight:800;letter-spacing:.13em;border:1px solid #edccd9;border-radius:99px;padding:7px 12px;background:#fff9fc90;color:#ac6c85}
 .homeShell .homeWelcome h1{grid-row:2;margin:14px 0 8px;font-size:42px;font-weight:820;letter-spacing:-.055em;line-height:1.1;color:#78344f}
 .homeShell .homeWelcome p{grid-row:3;max-width:none;margin:0;color:#906678;font-size:14px;line-height:1.6}
 .homeShell .homeWelcome .mascotStage{grid-row:4;width:222px;max-width:100%;height:222px;aspect-ratio:1;margin:8px 0 4px;padding:0;align-self:center;justify-self:center;position:relative}
 .homeShell .homeWelcome .mascotStage:before{display:block;position:absolute;inset:auto 23% 0;width:54%;height:13px;border-radius:50%;background:#b9678d12;filter:blur(7px)}
 .homeShell .homeWelcome .liveMascot{width:100%;height:100%;scale:1}
 .homeShell .homeWelcome #start{grid-row:5;margin:5px 0 0;width:100%;max-width:284px;min-height:49px;padding:13px 20px;border-radius:16px;font-size:14px;box-shadow:0 7px 17px #c42b6420}
 .homeShell .homeWelcome #startPaid{grid-row:6;width:100%;max-width:284px;min-height:43px;padding:10px 14px;font-size:12px;border-color:#edcbd9;background:#ffffff65;color:#a15878;box-shadow:none;border-radius:14px}
 .homeShell .homeWelcome small{grid-row:7;font-size:10px;line-height:1.5;margin:12px 0 0;color:#a38492}
 .homeSetup{padding:28px 30px 22px;background:#fffffff0;border:1px solid #efdde5;border-radius:30px;box-shadow:0 10px 34px #9c3a5b06;min-width:0}
 .desktopSetupHeading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
 .desktopSetupHeading div>span{font-size:9px;letter-spacing:.12em;color:#ba91a4;font-weight:700}
 .desktopSetupHeading h2{font-size:22px;line-height:1.2;letter-spacing:-.035em;margin:5px 0 0;color:#745065}
 .desktopSetupHeading .desktopStep{width:37px;height:37px;display:grid;place-items:center;color:#ae7c43;background:#fff2cf;border-radius:13px 14px 14px 9px;font-size:13px;font-weight:800;transform:rotate(5deg)}
 .homeModes{gap:12px;margin-bottom:18px}
 .homeModes button{min-height:77px;gap:13px;border-radius:18px;background:#fffafc;color:#976b80;box-shadow:none;font-size:14px}
 .homeModes button[aria-pressed=true]{background:#fff1f7;color:#b83269;border-color:#e7a8c0;box-shadow:inset 0 0 0 1px #f8dce8}
 .homeModes svg{width:28px;height:28px}
 .homeUpload{padding:16px;min-height:78px;border-radius:18px;margin-bottom:20px;background:#fffafc;border-color:#e9cbda}
 .homeUpload b{font-size:13px;font-weight:650}.homeUpload small{font-size:11px;color:#8d697c}
 .homeUpload .uploadMark{width:37px;height:37px;background:#f9e9f0;border-radius:12px}
 .homeLevelHeading{margin-bottom:9px}.homeLevelHeading label{font-size:12px;font-weight:700}.homeLevelHeading span{font-size:10px}
 .homeLevels{gap:9px;margin-bottom:20px}.homeLevels button{min-height:43px;border-radius:13px;font-size:12px}
 .homeLanguage{gap:20px;padding-bottom:14px}.homeLanguage select{width:65%;min-height:44px;font-size:13px;border-radius:13px;background:#fffafd}
 .homeOptions summary{min-height:52px;font-size:12px;font-weight:600}
 .homeOptionsBody{padding-top:8px}.homeOptionsBody select,.homeOptionsBody input{font-size:14px}
 .homeSetup #resumeSession:not(:empty){margin-top:15px}.homeSetup #resumePaidSession{font-size:13px;min-height:44px}
 .homeShell .reviewSample{font-size:12px}

 /* Login/register are composed for a wide screen, without replacing controls. */
 .shell:has(.authCard){display:grid;max-width:1030px;grid-template-columns:minmax(0,1fr) minmax(340px,420px);grid-template-rows:auto 68px auto auto;gap:0 58px;padding:34px 44px 48px;align-content:center}
 .shell:has(.authCard)>.brand{grid-column:1/-1;grid-row:1;margin-bottom:36px}
 .shell:has(.authCard)>.authHero{grid-column:1;grid-row:2/4;padding:10px 0 18px;align-self:start}
 .shell:has(.authCard)>.authHero:after{display:none}
 .shell:has(.authCard)>.authHero h1{font-size:48px;letter-spacing:-.05em;line-height:1.1;color:#754056;margin:0 0 14px}
 .shell:has(.authCard)>.authHero p{font-size:15px;color:#a17c8d}
 .shell:has(.authCard)>.mascotStage{grid-column:1;grid-row:3/5;align-self:center;padding:10px 0 30px;margin-top:120px}
 .shell:has(.authCard)>.mascotStage .liveMascot{width:234px;height:234px}
 .shell:has(.authCard)>.mascotStage:before{width:170px;height:70px;bottom:25px;opacity:.5}
 .shell:has(.authCard)>.mascotStage .mascotHello{top:0;left:calc(50% + 35px);font-size:11px}
 .shell:has(.authCard)>.tabs{grid-column:2;grid-row:2;align-self:end;margin:0 0 14px;background:#f9ebf2;padding:5px;border:1px solid #efdae4;border-radius:18px}
 .shell:has(.authCard)>.tabs .tab{border:0;background:transparent;color:#ad8195;font-size:13px}
 .shell:has(.authCard)>.tabs .tab.active{background:#fff;color:#ad3465;box-shadow:0 3px 9px #9433590a}
 .shell:has(.authCard)>.authCard{grid-column:2;grid-row:3;margin:0;border-radius:26px;padding:27px;background:#ffffffed;box-shadow:0 8px 34px #8d335509}
 .shell:has(.authCard)>.legalLinks{grid-column:2;grid-row:4;font-size:11px;margin:15px 0 0}
 .shell:has(.authCard):not(:has(>.tabs))>.authCard{grid-row:2/4;align-self:center}
 .shell:has(.authCard) .authCard input{font-size:14px;min-height:47px}.shell:has(.authCard) .authCard label{font-size:12px}

 /* Room for history/results and master data, rather than a stretched phone. */
 .shell:has(.historyList),.shell:has(.resultPage){max-width:1100px;padding:34px 40px 48px}
 .historyHead{margin-top:28px;margin-bottom:20px}.historyHead h2{color:#78475d;font-size:30px;letter-spacing:-.03em}
 .historyList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:none;border:0;box-shadow:none;padding:0}
 .historyList>.historyItem{background:#fffdfef0;padding:22px;margin:0;border-radius:24px;align-self:start;min-width:0}
 .historyList>.emptyHistory{grid-column:1/-1;padding:70px 30px;background:#fff9fca8;border:1px dashed #eacada;border-radius:28px}
 .historyChat{max-height:380px;overflow:auto}.historyTitle b{font-size:16px;color:#795567}
 .resultIntro{margin-bottom:26px}.scoreSummary{grid-template-columns:220px minmax(0,1fr);gap:20px}.overallScore,.scoreNarrative,.scoreMetrics{border-radius:24px}
 .resultColumns{gap:20px}.resultActions{display:flex;gap:14px}.resultActions>.btn{flex:1}
 .shell:has(.masterCard){max-width:1220px;padding:34px 40px 48px}.masterHero h1{color:#78435c}
 .masterSummary>div{border-radius:22px;padding:22px}.masterTabs{gap:10px}.masterCard{border-radius:25px}
 .shell:has(#accountBack){max-width:720px;padding:40px 44px}.shell:has(#accountBack)>.hero{padding:30px 0 22px}.shell:has(#accountBack)>.card{padding:30px;border-radius:25px}
 .sessionShell .voiceFocus{padding-top:10px}.sessionShell .sessionCompanion{width:282px}
 .sessionShell .conversationPanel{width:min(620px,calc(100vw - 48px));border-radius:28px 28px 0 0}
}
@media (min-width:960px) and (max-height:800px){
 .homeShell{padding-top:20px}.homeGreeting{margin-top:10px;min-height:46px}
 .homeShell .homeWelcome{padding-top:24px;padding-bottom:23px;min-height:490px}
 .homeShell .homeWelcome .mascotStage{width:194px;height:194px}
 .homeShell .homeWelcome h1{font-size:38px}
 .shell:has(.authCard){align-content:start;padding-top:24px}.shell:has(.authCard)>.brand{margin-bottom:22px}
}
@media (min-width:960px) and (hover:hover) and (prefers-reduced-motion:no-preference){
 .homeNav button,.homeLogout{transition:background .18s ease,color .18s ease}
 .homeNav button:hover,.homeLogout:hover{background:#f9eaf2;color:#b93a6c}
 .homeModes button:hover{border-color:#d897b4;transform:translateY(-2px)}
 .homeUpload{transition:background .18s ease,border-color .18s ease}.homeUpload:hover{background:#fff4f9;border-color:#d8a5be}
}
/* R16: keep the welcome card compact while the detailed form grows. */
@media(min-width:960px){
 .homeGrid{align-items:start}
 .homeShell .homeWelcome{align-self:start;position:sticky;top:24px;min-height:0;grid-template-rows:auto auto auto 225px auto auto auto}
 .homeShell .homeWelcome .mascotStage{align-self:center}
}
@media(min-width:960px) and (max-height:650px){
 .homeShell .homeWelcome{position:static;grid-template-rows:auto auto auto 170px auto auto auto}
 .homeShell .homeWelcome .mascotStage{width:170px;height:170px}
}