/* HUMANATE, ONE SYSTEM: the phone (2026-10-12, second pass). Loaded last on Venture Studio and the Commercial Exchange.
   The user's brief for phones, in order: nothing cut off; it scrolls; it feels like a website and a finished app, not a form;
   no large Continue button; Ask Humo and the pathway switcher are one control, as on the desktop; the form comes last.
   So, at 760px and under:
     1. after the opening, a pathway is ONE scrolling page (the engine stacks its explaining sections, see "story" in one.js);
        it ends in a single call to action, and only then come the questions and the form, one step at a time;
     2. one slim bottom bar on frosted glass: Back on the left, Ask Humo joined to the pathway name on the right, and between
        them a compact Next button that exists only on the question and form steps;
     3. a hairline on the bar shows how far the page has been read, a chevron says there is more, and each section arrives as
        it is scrolled to;
     4. every component is drawn for a narrow column, in one type scale.
   The script half is mobile.js. Nothing here applies above 760px. */
@media (max-width:760px){
  :root{--top:0px;--foot:0px;--mpad:18px;--mbar:calc(64px + env(safe-area-inset-bottom,0px))}
  html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
  button,a{touch-action:manipulation}

  /* the page ---------------------------------------------------------------------------------------------------- */
  .stage{inset:0}
  .screen,.screen.wide{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content!important;align-content:start;align-items:start;gap:16px;
    padding:86px var(--mpad) calc(var(--mbar) + 36px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none}
  .screen::-webkit-scrollbar{display:none}
  .sys{height:auto;min-height:0;place-items:start stretch}
  .q{max-width:none}
  .q h1{font-size:clamp(27px,7.4vw,33px);line-height:1.06}
  .q h2{font-size:clamp(24px,6.8vw,30px);line-height:1.08}
  .q p{margin-top:10px;max-width:none;font-size:14.5px;line-height:1.45}
  .q .say{min-height:0;margin-top:10px;font-size:14px}
  html.at0 .screen{gap:12px}
  .screen.hero{align-content:center;text-align:left}
  .screen.hero .q{margin:0} .screen.hero .q h2{max-width:none;margin:0;font-size:clamp(30px,8.6vw,38px)} .screen.hero .q p{max-width:none;margin:14px 0 0;font-size:15.5px}
  .screen.hero .q::after{content:none}

  /* the one-page story: sections one under another, each with room to breathe and a hairline between */
  .screen.long{display:block;padding-top:0}
  .screen.long .blk{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:44px 0;border-top:.5px solid rgba(var(--b),.12)}
  .screen.long .blk.hero{align-content:center;min-height:calc(100svh - var(--mbar) - 10px);padding:96px 0 40px;border-top:0;text-align:left}
  .screen.long .blk.hero .q{margin:0}
  .screen.long .blk.hero .q h2{max-width:none;margin:0;font-size:clamp(31px,8.8vw,40px);line-height:1.04}
  .screen.long .blk.hero .q p{max-width:none;margin:14px 0 0;font-size:15.5px}
  .screen.long .blk.hero .q::after{content:"Scroll";display:block;width:auto;margin:34px 0 0;padding-top:34px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);animation:none;
    background:linear-gradient(180deg,rgba(var(--b),.7),rgba(var(--b),0)) left top/1px 26px no-repeat}
  .screen.long .blk.hero .sys{display:none}
  .screen.long .blk.end{padding:34px 0 10px}
  .screen.long .blk.end .go{display:flex!important;width:100%;flex:none;margin:0;min-height:52px;justify-content:space-between;padding:0 18px;font-size:16px}
  /* a section arrives as it is reached (class set by mobile.js; without the script everything is simply there) */
  html.m-rev .screen.long .blk:not(.hero){opacity:0;translate:0 26px;transition:opacity .7s var(--ease),translate .8s var(--ease)}
  html.m-rev .screen.long .blk.in{opacity:1;translate:0 0}

  /* the header stays readable while the page passes under it */
  .m-top{position:fixed;left:0;right:0;top:0;height:92px;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgb(var(--ground)) 0,rgb(var(--ground)) 66%,rgba(var(--ground),0) 100%)}

  /* the bottom bar ---------------------------------------------------------------------------------------------- */
  .m-bot{position:fixed;left:0;right:0;bottom:0;height:var(--mbar);z-index:5;pointer-events:none;background:rgba(var(--ground),.76);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 .5px 0 rgba(var(--b),.2)}
  .m-bot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px;background:linear-gradient(0deg,rgba(var(--ground),.9),rgba(var(--ground),0))}
  .m-prog{position:absolute;left:0;top:0;width:100%;height:1.5px;background:var(--hi);transform-origin:0 50%;transform:scaleX(var(--read,0));opacity:var(--readon,0);transition:opacity .3s var(--ease)}
  .bar{left:12px;right:calc(var(--pillw,60px) + 20px);bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px;justify-content:flex-start}
  .back{min-width:44px;min-height:44px;justify-content:center;padding:0;border-radius:2px;color:var(--paper);box-shadow:inset 0 0 0 .5px rgba(var(--b),.24)}
  .back span{display:none} .back[hidden]{display:none}
  /* Next: compact, and only where a step asks for something */
  .bar .go{flex:0 0 auto;margin-left:auto;justify-content:center;min-height:44px;padding:0 15px;gap:8px;font-size:14px;box-shadow:none;white-space:nowrap}
  .bar .go svg{width:14px;height:14px}
  .go.pulse{animation:none}
  html.long .bar .go,html.at0 .bar .go{display:none!important}
  .go:active,.back:active,.humo-b:active,.swap-b:active{scale:.96}
  /* Ask Humo and the pathway, one capsule (as on the desktop) */
  .humo,.humo.duo{display:flex;align-items:center;left:auto;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:44px;border-radius:999px;translate:none;
    background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12)}
  .humo-b{width:44px;height:44px;padding:0;justify-content:center;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .humo-b span{display:none} .humo-b i{width:32px;height:32px}
  .humo .swap{position:relative;left:auto;right:auto;top:auto;bottom:auto;translate:none;display:none;opacity:1;visibility:visible}
  .humo .swap.on{display:block}
  .humo .swap-b{height:44px;max-width:150px;padding:0 13px 0 12px;gap:6px;border-radius:0 999px 999px 0;font-size:13px;background:none;box-shadow:inset 1px 0 0 rgba(255,255,255,.16);-webkit-backdrop-filter:none;backdrop-filter:none}
  .humo .swap-b > :first-child{overflow:hidden;text-overflow:ellipsis}
  .humo .swap-b svg{flex:none;width:13px;height:13px}
  .humo .swap-m{left:auto;right:0;top:auto;bottom:calc(100% + 12px);min-width:210px}
  .humo-p{bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(100% - 20px);max-height:calc(100svh - 110px);overflow-y:auto}
  .brief{display:none}

  /* more below */
  .m-cue{position:fixed;left:50%;bottom:calc(var(--mbar) + 8px);z-index:5;width:28px;height:28px;margin-left:-14px;display:grid;place-items:center;border-radius:50%;pointer-events:none;color:var(--paper);
    background:rgba(var(--ground),.7);box-shadow:inset 0 0 0 .5px rgba(var(--b),.4);opacity:0;translate:0 6px;transition:opacity .35s var(--ease),translate .35s var(--ease)}
  .m-cue svg{width:12px;height:12px}
  html.m-more:not(.long) .m-cue{opacity:1;translate:0 0;animation:mCue 1.8s var(--ease) infinite}
  @keyframes mCue{50%{translate:0 4px}}

  /* components, for a narrow column ----------------------------------------------------------------------------- */
  /* opening cards: three rows on one screen. Icon, title, one line; the arrow at the row's centre */
  .p-cards,.p-cards.n3,.p-cards.n4{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:2px;max-width:none}
  .p-card,.p-cards.n4 .p-card{height:auto;min-height:clamp(82px,12.6svh,110px);justify-content:center}
  .p-card .art,.p-cards.n4 .p-card .art{inset:0 0 0 42%}
  .p-card .tx{padding:11px 56px 11px 16px;max-width:none}
  .p-card .ms{font-size:21px;margin-bottom:6px}
  .p-card b,.p-cards.n4 .p-card b{font-size:20px;white-space:normal}
  .p-card .l,.p-cards.n4 .p-card .l{min-height:0;margin-top:3px;font-size:13px;line-height:1.35;max-width:23ch}
  .p-card .tg{display:none}
  .p-card .st{position:absolute!important;right:14px;top:50%;bottom:auto;translate:0 -50%;margin:0!important}
  .p-card:active{scale:.985}
  /* text columns */
  .p-pillars{margin-top:0}
  .p-pil{padding:13px 0} .p-pil em{font-size:10.5px} .p-pil b{margin-top:5px;font-size:19px} .p-pil span{margin-top:3px;font-size:13.5px;line-height:1.4}
  /* step cards: a compact stack, the line always readable */
  .p-steps{gap:10px;margin-top:0}
  .p-step{min-height:0;padding:14px 50px 14px 16px}
  .p-step:not(:last-child)::after,.p-step:not(:last-child)::before{content:none}
  .p-step em{right:0;top:0;width:30px;height:30px;font-size:13px}
  .p-step .ms{margin-top:0;font-size:22px}
  .p-step b,.p-step .ms + b{margin-top:6px;padding-top:0;font-size:19px}
  .p-step > span{max-height:none;margin-top:4px;opacity:1;translate:0 0;font-size:13.5px;line-height:1.4}
  .p-thru{margin-top:12px;font-size:12px} .p-thru i{padding:6px 10px}
  .p-join{display:none}                                   /* the page's closing button does this on a phone */
  /* statements */
  .p-match .mi b{color:rgba(255,255,255,.66)} .p-match .mi span{color:var(--mute)}
  /* lists and ticks */
  .p-list .p-row{min-height:0;padding:12px 0}
  .p-row b{font-size:20px} .p-row span{font-size:13.5px}
  .p-tick b{font-size:18px}
  /* press feedback wherever something can be pressed */
  .p-row:active,.p-step:active,.mi:active,.p-tick:active,.p-pan:active,.nd:active,.ph2:active{opacity:.75}
}
/* a short phone, or a phone with the browser bars showing */
@media (max-width:760px) and (max-height:640px){
  .screen,.screen.wide{gap:12px}
  .q h1{font-size:26px} .q h2{font-size:23px}
  .p-card,.p-cards.n4 .p-card{min-height:78px} .p-card .l,.p-cards.n4 .p-card .l{display:none}
}
@media (prefers-reduced-motion:reduce){ .screen{scroll-behavior:auto} html.m-more .m-cue{animation:none} html.m-rev .screen.long .blk:not(.hero){opacity:1;translate:none;transition:none} }
@media (max-width:760px){ .p-jour .cap{display:none} }   /* "Rest on a stage..." is a pointer instruction */