/* CG187 · the phone pass (Steven, Nov 2, 1:00 to 1:08): an app at 375 to 430, not a squeezed desktop page.
   Loaded last on every page. Phone rules sit under (max-width:760px); the reveal guard applies everywhere. */
picture.cg-pic{display:contents}
:root{--ph-1:16px;--ph-2:24px;--ph-3:32px;--ph-4:48px}

/* reveal never hides content: without JS nothing is hidden; on phones headings and cards are there from the first paint */
html:not(.js) .rv{opacity:1!important;transform:none!important;translate:none!important}
@media (max-width:760px){
  html.js .rise .rwi,html.js .rise:not(.on) .rwi{transform:none!important;transition:none!important}
  html .rv,html.js .px-rv .rv{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
}

@media (max-width:760px){
  /* the top bar: one tidy row at the shell's 56px (46 once its title takes over), the safe-area inset on top, a hairline shadow after a little scroll */
  html.sh-on body header.px-head{box-sizing:border-box;padding-top:env(safe-area-inset-top)!important;transition:box-shadow .2s}
  html.sh-on.cg-tight body header.px-head{box-shadow:0 1px 0 rgba(10,22,51,.08),0 8px 24px -16px rgba(10,22,51,.24)}
  html.sh-on body header.px-head .px-brand img.mk-group{height:28px!important;width:auto!important}
  html.sh-on body header.px-head .sh-ask{min-height:44px!important}

  /* heroes: mark pill, eyebrow, headline, lede, actions, on one 16/24 scale; the hero numeral is hidden */
  html body main#main>section.tg-pghero:not(.tg-fdhero):not(.article-hero){padding-top:calc(80px + env(safe-area-inset-top))!important;padding-bottom:var(--ph-4)!important}
  html body main#main>section.article-hero{padding-top:calc(80px + env(safe-area-inset-top))!important}
  html body main#main>section.t9-hero{padding-top:calc(80px + env(safe-area-inset-top))!important}
  html body main#main>section.tg-pghero:not(.tg-fdhero)>.px-wrap{display:flex!important;flex-direction:column!important;gap:var(--ph-1)!important}
  html body main#main>section.tg-pghero:not(.tg-fdhero)>.px-wrap>*{order:5;margin-top:0!important;margin-bottom:0!important}
  html body main#main>section.tg-pghero>.px-wrap>:is(.os-mark,.st-mark){order:0!important;align-self:flex-start}
  html body main#main>section.tg-pghero>.px-wrap>:is(.px-kick,.tg-num){order:1!important}
  html body main#main>section.tg-pghero>.px-wrap>h1{order:2!important}
  html body main#main>section.tg-pghero>.px-wrap>:is(.px-dek,.tg-pgdek,.rlede){order:3!important}
  html body main#main>section.tg-pghero>.px-wrap>:is(.tg-pgcta,.t9-ctas,.px-ctas,.cg-more){order:4!important;margin-top:var(--ph-1)!important}
  html body main#main section.tg-pghero .tg-num>span{display:none!important}

  /* sections on the phone scale: 48 between sections, nothing bigger */
  html body main#main>section:not(:first-child){padding-bottom:var(--ph-4)!important}
  html body main#main>section:not(:first-child)[id="next"],html body main#main>section#prize{padding-top:var(--ph-4)!important}
  html body main#main>section:is(.bd-close,.tg-close,.st-close,#selling,#start){padding-bottom:var(--ph-4)!important}
  html body main#main :is(.px-sechead,.cg-rhead,.t9-k,.tg-head)+*{margin-top:0}
  html body main#main section h2{margin-bottom:var(--ph-1)!important}
  html body main#main section :is(.cg-ssub,.t9-lead,.px-sub){margin-top:0!important;margin-bottom:var(--ph-2)!important}

  /* nothing under 12px */
  .cai-pill{font-size:12px!important}
  .cai-pill span{font-size:12px!important}

  html body main#main img.cg-phcrop{aspect-ratio:auto}
/* the product screens: a phone frame, a real phone capture, sized to the screen */
  html body main#main img.cg-phshot{display:block!important;padding:0!important;max-width:none!important;box-sizing:border-box!important;width:min(100%,300px)!important;height:auto!important;aspect-ratio:780/1300!important;object-fit:cover!important;object-position:50% 0!important;margin:0 auto!important;border:8px solid #0a1633!important;border-radius:36px!important;background:#0a1633!important;box-shadow:0 32px 64px -32px rgba(10,22,51,.45),0 0 0 1px rgba(10,22,51,.12)!important}
  .cg-desk{display:none!important}
  /* cards that showed a laptop screen show the top of the phone screen instead */
  img.cg-phcrop{object-fit:cover!important;object-position:50% 0!important}
  /* the swipe carousel */
  .cg-car{display:block!important;margin:var(--ph-2) -16px 0;position:relative}
  .cg-car-t{display:flex;gap:var(--ph-1);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cg-car-t::-webkit-scrollbar{display:none}
  .cg-car-s{flex:0 0 78%;scroll-snap-align:center;margin:0}
  html body main#main .cg-car-s img.cg-phshot{width:100%!important}
  .cg-car-d{display:flex;justify-content:center;gap:0;margin-top:-8px}
  .cg-car-d button{width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  .cg-car-d button::before{content:"";width:8px;height:8px;border-radius:50%;background:#c9d4ea;transition:background-color .2s,width .2s}
  .cg-car-d button[aria-current="true"]::before{background:#1559f5;width:20px;border-radius:4px}

  /* the footer: grouped rows that fold, app style */
  html body footer .ft-acc{border-bottom:1px solid rgba(10,22,51,.1)}
  html body footer .tg-ft-grid{display:block!important}
  html body footer .tg-ft-grid>*{margin:0!important}
  html body footer .ft-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin:0!important;cursor:pointer;list-style:none;font:600 15px/1.2 Rubik,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#0a1633!important}
  html body footer .ft-acc>summary::-webkit-details-marker{display:none}
  html body footer .ft-acc>summary::after{content:"";width:8px;height:8px;border-right:2px solid #8a94a6;border-bottom:2px solid #8a94a6;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
  html body footer .ft-acc[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
  html body footer .ft-acc>:not(summary){padding:0 0 var(--ph-1)!important;margin:0!important}
  html body footer .ft-acc .ft-acc-b{display:flex;flex-direction:column}
  html body footer .ft-acc .ft-acc-b a{min-height:44px;display:flex;align-items:center}
}
/* laptops: the groups are plain labelled columns */
@media (min-width:761px){
  footer .ft-acc>summary{list-style:none;pointer-events:none;cursor:default}
  footer .ft-acc>summary::-webkit-details-marker{display:none}
  .cg-car,.cg-phonly{display:none!important}
}

/* sections on one rhythm: two white sections share one 48px gap (it was 96: the section's 48 below plus the next one's 48
   above); a white section after a coloured band, or a band itself, keeps 48 inside */
@media (max-width:760px){
  html body main#main>section:is(#letter,#own,#lab-newest,#vs,#ask,#believe,#platform,#parent,#parts,#companies,#family,#steven,#writing,#press,.cg-lift,#what,#listen,#latest,#principles,#order,#case,#apps,#okr,#connect,#pieces,#services,#how,#work,#shows,#rules,#faq,#screens,#features,#related):not(:first-child){padding-top:0!important}
  html body main#main>section:is(#letter,#own,#lab-newest,#vs,#ask,#believe,#platform,#parent,#parts,#companies,#family,#steven,#writing,#press,.cg-lift,#what,#listen,#latest,#principles,#order,#case,#apps,#okr,#connect,#pieces,#services,#how,#work,#shows,#rules,#faq,#screens,#features,#related):not(:first-child)>:is(.px-wrap,.wrap){padding-top:0!important}
  html body main#main>section:not(:is(#letter,#own,#lab-newest,#vs,#ask,#believe,#platform,#parent,#parts,#companies,#family,#steven,#writing,#press,.cg-lift,#what,#listen,#latest,#principles,#order,#case,#apps,#okr,#connect,#pieces,#services,#how,#work,#shows,#rules,#faq,#screens,#features,#related))+section:is(#letter,#own,#lab-newest,#vs,#ask,#believe,#platform,#parent,#parts,#companies,#family,#steven,#writing,#press,.cg-lift,#what,#listen,#latest,#principles,#order,#case,#apps,#okr,#connect,#pieces,#services,#how,#work,#shows,#rules,#faq,#screens,#features,#related){padding-top:var(--ph-4)!important}
  html body main#main>section.cg-lift+section{padding-top:0!important}
}
@media (max-width:760px){
  html body main#main section :is(.px-wrap,.wrap)>:last-child{margin-bottom:0!important}
  html body main#main section :is(.cg-parts,.st-fn,.cg-fn,.tg-rules,.t9-own-grid,.st-shots,.os-devices):not(:last-child){margin-bottom:var(--ph-2)!important}
  html body main#main img.cg-phcrop{aspect-ratio:4/3!important;height:auto!important}
}
@media (max-width:760px){html body main#main:not(#z1):not(#z2):not(#z3) .tg-ps-rows li>b{font-size:12px!important}}
@media (max-width:760px){html body main#main:not(#z1):not(#z2):not(#z3) section.tg-pghero .tg-num>span{display:none!important}}
@media (max-width:760px){.cg-car-t:focus-visible{outline:2px solid #1559f5;outline-offset:-2px;border-radius:12px}}
/* CG189 · the footer under 700px on phones: the motto and the call to sell on compact rows, the four socials as one row of
   round 44px buttons (their names stay for screen readers), the Installed pill and the copyright kept */
@media (max-width:760px){
  html body footer.px-foot.tg-foot .tg-ft-top{display:block!important;padding-bottom:16px!important}
  html body footer.px-foot.tg-foot .px-brand img.mk-group{height:24px!important;width:auto!important}
  html body footer.px-foot.tg-foot .px-motto{font:800 24px/1.1 Rubik,system-ui,sans-serif!important;line-height:1.1!important;margin:12px 0 0!important}
  html body footer.px-foot.tg-foot .tg-ft-follow{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;margin:16px 0 0!important}
  html body footer.px-foot.tg-foot .tg-ft-follow .px-fbtn{width:44px!important;height:44px!important;min-height:0!important;padding:0!important;border-radius:50%!important;justify-content:center!important}
  html body footer.px-foot.tg-foot .tg-ft-follow .px-fbtn span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
  html body footer.px-foot.tg-foot .tg-ft-sell{margin:20px 0 0!important;padding:16px 0 0!important;border-top:1px solid rgba(10,22,51,.08)}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-ft{margin:0!important;font-size:13px!important}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-ft-lead{margin:4px 0 12px!important;font-size:15px!important;line-height:1.4!important}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-fm{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 16px!important;margin:0!important}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-fm .px-btn{min-height:44px;padding:0 18px!important;font-size:15px!important}
  html body footer.px-foot.tg-foot .px-legal{margin-top:16px!important;padding-top:16px!important;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  html body footer.px-foot.tg-foot .px-legal p{margin:0!important;font-size:13px!important}
}
@media (max-width:760px){
  html body footer.px-foot.tg-foot .tg-ft-mid .tg-ft-grid{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:16px!important;align-items:start}
  html body footer.px-foot.tg-foot .tg-ft-grid .ft-acc>summary{min-height:48px!important;font-size:15px!important}
  html body footer.px-foot.tg-foot .tg-ft-grid .ft-acc .ft-acc-b a{min-height:44px}
  html body footer.px-foot.tg-foot .px-in{padding-top:32px!important;padding-bottom:24px!important}
  html body footer.px-foot.tg-foot .px-legal .px-meter{flex-basis:100%}
}
/* the footer, phone, under 600px: the mark and the four socials on one row, the motto under it, the call to sell as one
   line of two buttons, the Ohana strip, Pages and Products as two tap-to-open groups side by side, the address as one
   compact row, then the Installed pill and the copyright. The Call group repeats the call button above, so it folds away. */
@media (max-width:760px){
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.px-brand{grid-column:1;grid-row:1}
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.tg-ft-follow{grid-column:2;grid-row:1;justify-self:end;margin:0!important}
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.px-motto{grid-column:1/-1;grid-row:2;margin:16px 0 0!important}
  html body footer.px-foot.tg-foot .tg-ft-follow{gap:4px!important}
  html body footer.px-foot.tg-foot .tg-ft-follow .px-fbtn{width:44px!important;height:44px!important;border:0!important;background:none!important;box-shadow:none!important}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-ft-lead{display:none!important}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-ft{margin:0 0 8px!important}
  html body footer.px-foot.tg-foot .tg-ft-sell{margin-top:16px!important;padding-top:16px!important}
  html body footer.px-foot.tg-foot .tg-ft-top{padding-bottom:0!important;border-bottom:0!important}
  html body footer.px-foot.tg-foot .tg-ft-grid>div:nth-child(2){display:none!important}
  html body footer.px-foot.tg-foot .tg-ft-grid>div:first-child{grid-column:1/-1;order:3;border:0}
  html body footer.px-foot.tg-foot .tg-ft-grid>div:first-child .ft-acc{border:0!important}
  html body footer.px-foot.tg-foot .tg-ft-grid>div:first-child summary{display:none!important}
  html body footer.px-foot.tg-foot .tg-ft-grid>div:first-child .px-addr{display:block!important;padding:12px 0 0!important;font-size:13px!important;line-height:1.4!important;color:#56607a}
  html body footer.px-foot.tg-foot .tg-ft-grid .ft-acc>summary{min-height:48px!important}
  html body footer.px-foot.tg-foot .px-legal{margin-top:16px!important;padding-top:16px!important}
  html body footer.px-foot.tg-foot .px-legal p{font-size:13px!important;line-height:1.4!important}
  html body footer.px-foot.tg-foot .px-in{padding-top:24px!important;padding-bottom:16px!important}
}
@media (max-width:760px){
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-fm{flex-wrap:nowrap!important;gap:12px!important}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-fm .px-btn{padding:0 16px!important;font-size:15px!important;white-space:nowrap}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-fm .px-link{font-size:15px!important;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
  html body footer.px-foot.tg-foot .tg-ft-grid{row-gap:0!important}
  html body footer.px-foot.tg-foot .tg-ft-grid>div:first-child .px-addr{padding-top:8px!important}
  html body footer.px-foot.tg-foot .tg-ft-mid{margin:16px 0 0!important}
}
@media (max-width:760px){
  html body footer.px-foot.tg-foot .px-legal{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px!important}
  html body footer.px-foot.tg-foot .px-legal .cai-pill{grid-row:1/span 2}
  html body footer.px-foot.tg-foot .px-legal .px-meter{flex-basis:auto}
  html body footer.px-foot.tg-foot .tg-ft-sell .tg-ft{display:none!important}
}

/* CG189 · How we invest film band: no empty dark tail under the copy on phones */
@media (max-width:760px){
html body main#main:not(#z1)>section.up-film:not(:first-child){padding-bottom:0!important}
html body main#main:not(#z1):not(#z2):not(#z3) .up-film .ov{padding:32px 16px 40px}
html body main#main:not(#z1):not(#z2):not(#z3) .up-film .ov > :last-child{margin-bottom:0}
}

/* CG189 · Studio: the four engagement steps once on phones; the described list stays, the short flow list goes */
@media (max-width:760px){
html body main#main:not(#z1) section#how figure.st-flow:has(~ dl.st-fn4){display:none!important}
}

/* CG189 · narrowest phones: the social buttons take their own row so nothing runs sideways at 320 */
@media (max-width:359px){
html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.tg-ft-follow{grid-column:1/-1;grid-row:2;justify-self:start;margin:12px 0 0!important}
html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.px-motto{grid-row:3}
}
@media (max-width:359px){html body footer.px-foot.tg-foot .tg-ft-sell .tg-fm{flex-wrap:wrap!important}}
/* CG189 · footer clearance under the tab bar on the 4px grid (74 became 76) */
@media (max-width:760px){html.sh-on body>footer.px-foot.tg-foot{padding-bottom:calc(var(--sh-end) + 2px)!important}}
/* CG189 · phone footer under 600 with the tab bar's room: no rule above the contact row, the address on one line */
@media (max-width:760px){
  html body footer.px-foot.tg-foot .tg-ft-sell{padding-top:0!important;border-top:0!important;margin-top:16px!important}
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.px-motto{margin-top:12px!important}
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child{align-items:center!important;row-gap:0!important}
  html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.px-brand{margin:0!important;align-self:center!important}
}
/* CG189 · home Ask on phones: the panel hugs its starters instead of holding 700px; answers scroll inside up to 60% of the screen */
@media (max-width:760px){
  html body main#main:not(#z1) section#ask .tg-askwrap,html body main#main:not(#z1) section#ask .tg-askwrap>div,html body main#main:not(#z1) section#ask .px-askp.inline,html body main#main:not(#z1) section#ask .px-askp-in{height:auto!important;min-height:0!important}
  html body main#main:not(#z1) section#ask .px-askp-thread{flex:none!important;max-height:60vh;overflow:auto}
}
@media (max-width:760px) and (min-width:360px){html body footer.px-foot.tg-foot .tg-ft-top>div:first-child>.px-follow.tg-ft-follow:not(#a):not(#b):not(#c){margin:0!important}}