/* Comfortable reading sizes across the prototype, including its illustrated UI. */
.readable{--muted:#b7bdc8;--soft:#aab2bf;font-size:18px;line-height:1.7}
.readable .main-nav>a,.readable .signin{font-size:16px}
.readable .header-inner{gap:24px}
.readable .main-nav{gap:22px}
.readable .header-actions{gap:18px}
.readable .language-button{font-size:14px;min-width:60px}
.readable .button,.readable .hero-actions .button{font-size:17px;min-height:54px}
.readable .button-small{font-size:15px;min-height:46px}
.readable .text-link,.readable .magic-hero .hero-actions .text-link{font-size:16px}
.readable .eyebrow,.readable .magic-hero .eyebrow,.readable .initiative-top .eyebrow{font:600 13px/1.7 var(--sans);letter-spacing:1.1px}
.readable .magic-hero .hero-description{font-size:21px;line-height:1.7;max-width:540px}
.readable .story-description,.readable .section-heading.has-orbs>p{font-size:19px;line-height:1.8;max-width:540px}
.readable .local-computers>p,.readable .tour-explanation p{font-size:18px;line-height:1.75}
.readable .access-note{font-size:14px}
.readable .magic-hero .hero-facts{gap:12px 24px;flex-direction:row}
.readable .magic-hero .hero-facts>span{font-size:14px;line-height:1.6}
.readable .magic-hero .hero-facts .icon{width:18px;height:18px}
.readable .capability-strip{gap:18px 0}
.readable .capability-strip>span{font-size:16px;line-height:1.6;padding-inline:15px;justify-content:center}
.readable .capability-strip>span:first-child{padding-left:0}
.readable .capability-strip>span:last-child{padding-right:0}
.readable .magic-hero .product-kicker{font:500 14px/1.6 var(--sans);max-width:calc(100% - 180px);min-height:44px;align-items:flex-end}
.readable .window-bar{font:400 13px/1.5 var(--sans);height:auto;min-height:48px;padding-block:11px;flex-wrap:wrap;gap:8px 12px}
.readable .preview-chip{font:400 12px/1.5 var(--sans);white-space:normal}
.readable .console-title{font-size:18px;line-height:1.5;align-items:flex-start}
.readable .example-label{font:500 12px/1.5 var(--sans);padding-top:5px}
.readable .magic-hero .console-main{padding:25px 24px}
.readable .magic-hero .demo-tabs button{font-size:15px;line-height:1.4;min-height:50px;padding:10px 7px;white-space:normal}
.readable .demo-tabs .icon{width:16px;height:16px}
.readable .magic-hero .task-brief p{font-size:16px;line-height:1.65;max-width:none;padding:13px 15px}
.readable .you-avatar{width:30px;height:30px;font-size:14px}
.readable .team-reply strong{font-size:16px}
.readable .team-reply p{font-size:14px;line-height:1.6}
.readable .agent-square{width:36px;height:36px}
.readable .activity-list{margin-block:23px;padding-left:15px}
.readable .activity-list li{padding:0 0 22px 24px}
.readable .activity-list strong{font-size:16px;font-weight:600;line-height:1.55}
.readable .activity-list li div>span{font-size:14px;line-height:1.6;margin-top:5px;color:#b0bac9}
.readable .activity-number{width:25px;height:25px;left:-13px;font:500 12px/1 var(--sans)}
.readable .output-files>span{font-size:14px;line-height:1.5;flex-wrap:wrap}
.readable .output-files .file-type{display:none}
.readable .output-files .icon{width:17px;height:17px}
.readable .demo-status{font:400 14px/1.6 var(--sans);max-width:55%}
.readable .demo-play{font-size:15px;min-height:44px;padding:10px 13px;white-space:normal}
.readable .demo-controls{align-items:center;gap:15px}
.readable .window-footer{height:auto;min-height:44px;padding-block:10px;font:400 13px/1.5 var(--sans)}
.readable .growth-trail{font:500 16px/1.6 var(--sans);gap:14px;flex-wrap:wrap}
.readable .personality-visual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:40px 0 0;align-items:stretch}
.readable .personality-orbs{grid-column:1/-1;grid-row:1}
.readable .personality-label{padding:14px;min-width:0;align-items:flex-start;gap:10px}
.readable .personality-label strong{font-size:17px;line-height:1.5}
.readable .personality-label div>span{font-size:15px;line-height:1.5}
.readable .personality-label-top{top:0;max-width:90%;min-width:230px}
.readable .personality-label-left,.readable .personality-label-right{position:static;transform:none}
.readable .personality-dot{margin-top:8px}
.readable .personality-visual figcaption,.readable .visual-caption{font:400 14px/1.6 var(--sans);color:#aab4c3}
.readable .personality-visual figcaption{grid-column:1/-1;margin:4px 0 0;position:static}
.readable .computer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.readable .code-window>span{font:400 14px/1.6 var(--mono)}
.readable .code-window code{font:400 15px/1.8 var(--mono);min-height:260px;overflow-wrap:anywhere}
.readable .desktop-scene{min-height:400px;padding-bottom:105px}
.readable .browser-mini>div:first-child span{font:400 12px/1.4 var(--sans)}
.readable .browser-content b{font-size:26px}
.readable .browser-content{min-height:215px}
.readable .computer-caption{font:500 16px/1.5 var(--sans);padding:18px 22px}
.readable .local-heading{font:600 14px/1.6 var(--sans)}
.readable .local-computers h3{font-size:28px;line-height:1.35}
.readable .cloud-node{font-size:16px}
.readable .device-row>div{font-size:16px}
.readable .local-note{font-size:14px;line-height:1.6;align-items:flex-start}
.readable .local-note .icon{margin-top:3px}
.readable .initiative-top{height:105px}
.readable .initiative-top .eyebrow{max-width:230px;padding-right:20px}
.readable .org-leader strong{font-size:18px}
.readable .org-leader div>span{font-size:14px;line-height:1.6}
.readable .initiative-visual .specialists strong{font-size:16px;overflow-wrap:anywhere}
.readable .initiative-visual .specialists div>span:last-child{font-size:14px;line-height:1.6}
.readable .initiative-visual .specialists>div{padding:16px 10px}
.readable .initiative-events>div{display:grid;grid-template-columns:20px 1fr;gap:3px 10px;font-size:16px;line-height:1.6;padding-block:13px}
.readable .initiative-events .icon{width:18px;height:18px;align-self:center}
.readable .initiative-events>div>span:last-child{grid-column:2;margin:0;text-align:left;font-size:14px;color:#b0bdd0}
.readable .tour-tabs{width:100%;display:flex;flex-wrap:wrap;justify-content:center}
.readable .tour-tabs button{font-size:16px;min-height:48px;padding:12px 18px;white-space:normal}
.readable .screen-topline{font:400 14px/1.6 var(--sans)}
.readable .screen-frame figcaption{font-size:14px;line-height:1.65;flex-wrap:wrap}
.readable .screen-zoom{font-size:14px;min-height:44px}
.readable .tour-explanation{grid-template-columns:1fr 1.2fr;align-items:start;gap:18px 35px}
.readable .tour-explanation h3{font-size:26px}
.readable .tour-explanation .text-link{font-size:16px;grid-column:2;max-width:none}
.readable .proof-tags{font-size:14px;gap:14px 24px}
.readable .closing-action p{font-size:16px;line-height:1.7}
.readable .footer-main>p{font-size:16px}
.readable .footer-main nav{font-size:16px;gap:16px 24px}
.readable .footer-bottom{font-size:14px;flex-wrap:wrap}
.readable .footer-bottom>div{flex-wrap:wrap;gap:12px 20px}
.readable .dialog-toolbar p{font-size:16px}
.readable .dialog-actions button{font-size:15px;min-height:44px}
.readable .access-dialog{width:min(590px,calc(100% - 28px))}
.readable .access-dialog .access-panel h2{font-size:28px}
.readable .access-panel-description,.readable .access-field>span,.readable .access-error,.readable .access-success p{font-size:16px}
.readable .access-field input,.readable .access-field textarea,.readable .access-submit{font-size:17px}
.readable .access-optional,.readable .access-consent,.readable .access-footnote{font-size:14px}
@media(max-width:1400px){
  .readable .site-header{height:76px}
  .readable .header-actions{margin-left:auto}
  .readable .header-actions>.button,.readable .signin{display:none}
  .readable .main-nav{display:none;position:fixed;inset:76px 0 0;background:var(--bg);padding:25px 32px;z-index:39;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;overflow-y:auto}
  .readable .main-nav.is-open{display:flex;height:calc(100dvh - 76px)}
  .readable .main-nav>a{font-size:24px;line-height:1.5;padding:18px 0;border-bottom:1px solid #33363d;white-space:normal}
  .readable .mobile-signin{display:block!important}
  .readable .menu-button{display:flex!important;width:44px;height:44px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:41}
  .readable .menu-button span{width:22px;height:2px;background:#e1e5eb;transition:transform .2s}
  .readable .menu-button[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .readable .menu-button[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
}
@media(max-width:1100px){
  .readable .magic-hero{grid-template-columns:1fr;padding-top:65px;gap:20px}
  .readable .magic-hero .hero-copy{max-width:720px}
  .readable .magic-hero h1{font-size:clamp(42px,7.5vw,76px)}
  .readable .magic-hero .hero-description{max-width:680px}
  .readable .magic-hero .hero-actions{flex-direction:row;align-items:center}
  .readable .hero.magic-hero .hero-product{width:100%;max-width:720px;justify-self:center;margin-top:0;padding-top:145px}
  .readable .hero.magic-hero .core-art.orb-art{top:-15px;right:0;width:300px}
  .readable .magic-hero .product-kicker{max-width:calc(100% - 180px)}
  .readable .computer-grid,.readable .initiative-section{grid-template-columns:1fr;gap:40px}
  .readable .computer-grid>div,.readable .initiative-visual{width:100%;max-width:720px;margin-inline:auto}
  .readable .initiative-top .eyebrow{max-width:calc(100% - 160px)}
  .readable .computer-section .section-heading.has-orbs{grid-template-columns:1fr 190px}
  .readable .computer-section .section-heading.has-orbs>p{grid-column:1/-1;max-width:700px;margin:0}
  .readable .computer-section .section-heading.has-orbs>.orb-art{grid-row:1;grid-column:2}
  .readable .tour-section .section-heading.has-orbs{grid-template-columns:1fr 170px}
  .readable .tour-section .section-heading.has-orbs>p{grid-column:1/-1;max-width:700px;margin:0}
  .readable .tour-section .section-heading.has-orbs>.orb-art{grid-row:1;grid-column:2}
  .readable .capability-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readable .capability-strip>span{justify-content:flex-start;padding-inline:12px}
  .readable .capability-strip>span:nth-child(2){border:0}
  .readable .footer-main{flex-wrap:wrap}
  .readable .footer-main nav{margin-left:0}
}
@media(max-width:900px){
  .readable .personality-section{grid-template-columns:1fr;gap:40px}
  .readable .personality-visual{width:100%;max-width:580px;margin-inline:auto}
}
@media(max-width:700px){
  .readable .magic-hero{padding-top:45px}
  .readable .magic-hero .hero-description{font-size:19px}
  .readable .story-description,.readable .section-heading.has-orbs>p{font-size:18px}
  .readable .magic-hero .eyebrow{max-width:none}
  .readable .magic-hero .hero-facts{flex-direction:column;gap:12px}
  .readable .hero.magic-hero .hero-product{padding-top:140px}
  .readable .hero.magic-hero .core-art.orb-art{width:250px;top:5px}
  .readable .magic-hero .product-kicker{max-width:calc(100% - 115px)}
  .readable .magic-hero .console-main{padding:22px 18px}
  .readable .console-title{flex-wrap:wrap;gap:8px}
  .readable .magic-hero .demo-tabs button{font-size:15px;padding-inline:5px;flex-direction:column;gap:7px}
  .readable .demo-tabs .icon{display:block}
  .readable .window-bar>.window-dots{display:none}
  .readable .window-bar{font-size:13px}
  .readable .demo-controls{flex-wrap:wrap}
  .readable .demo-status{max-width:100%}
  .readable .demo-play{margin-left:auto}
  .readable .capability-strip>span{font-size:14px;gap:8px;padding-inline:8px;align-items:flex-start}
  .readable .capability-strip .icon{margin-top:3px;flex-shrink:0}
  .readable .growth-trail{gap:10px;font-size:15px}
  .readable .growth-trail .icon{width:13px;height:13px}
  .readable .personality-label{padding:12px;gap:8px}
  .readable .personality-label strong{font-size:16px}
  .readable .personality-label div>span{font-size:14px}
  .readable .personality-visual{gap:12px}
  .readable .computer-section .section-heading.has-orbs,.readable .tour-section .section-heading.has-orbs{grid-template-columns:1fr 115px;gap:20px 14px}
  .readable .section-heading.has-orbs>div:first-child{grid-column:1/-1}
  .readable .computer-section .section-heading.has-orbs>.orb-art,.readable .tour-section .section-heading.has-orbs>.orb-art{grid-row:2;grid-column:2;width:125px}
  .readable .computer-section .section-heading.has-orbs>p,.readable .tour-section .section-heading.has-orbs>p{grid-column:1;grid-row:2}
  .readable .local-computers h3{font-size:27px}
  .readable .desktop-scene{padding-inline:18px;min-height:450px}
  .readable .code-window{width:100%}
  .readable .code-window code{font-size:14px;padding-inline:14px}
  .readable .browser-mini{width:52%;right:18px}
  .readable .computer-caption{font-size:15px;padding-inline:18px}
  .readable .local-computers{padding:26px 22px}
  .readable .device-row{gap:8px}
  .readable .device-row>div{font-size:15px;padding-inline:4px}
  .readable .initiative-visual{padding:22px 18px;margin-top:20px}
  .readable .initiative-top{height:110px}
  .readable .initiative-top .eyebrow{max-width:calc(100% - 130px);padding:0}
  .readable .initiative-top .orb-art{width:160px;top:-28px}
  .readable .initiative-visual .specialists{grid-template-columns:1fr;gap:10px}
  .readable .initiative-visual .specialists>div{display:grid;grid-template-columns:36px 1fr;gap:2px 14px;text-align:left;padding:14px}
  .readable .initiative-visual .specialist-icon{grid-row:1/3;margin:0}
  .readable .initiative-visual .specialists div>span:last-child{margin:0;grid-column:2}
  .readable .team-connections{width:1px;height:26px;background:#735138}
  .readable .team-connections:before,.readable .team-connections span{display:none}
  .readable .tour-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .readable .tour-tabs button{font-size:16px;padding:12px 8px}
  .readable .screen-topline{font-size:14px;flex-wrap:wrap}
  .readable .screen-topline>span:last-child{max-width:100%;text-align:left}
  .readable .screen-zoom{position:static;justify-content:center;border-radius:0;border-inline:0;box-shadow:none;min-height:48px;background:#161e29}
  .readable .screen-frame figcaption>span+span{margin-top:8px}
  .readable .tour-explanation{grid-template-columns:1fr;gap:15px}
  .readable .tour-explanation .text-link{grid-column:1}
  .readable .footer-main{align-items:flex-start}
  .readable .footer-main nav{gap:16px 22px}
  .readable .dialog-toolbar{flex-wrap:wrap}
  .readable .dialog-toolbar p{max-width:none;width:100%;font-size:15px}
  .readable .access-dialog .access-panel{padding-inline:20px}
}
@media(max-width:374px){
  .readable .magic-hero h1{font-size:37px}
  .readable .hero.magic-hero .core-art.orb-art{width:225px;right:-4px;top:16px}
  .readable .personality-visual{grid-template-columns:1fr}
  .readable .personality-label-left,.readable .personality-label-right{grid-column:1}
  .readable .computer-section .section-heading.has-orbs,.readable .tour-section .section-heading.has-orbs{grid-template-columns:1fr}
  .readable .computer-section .section-heading.has-orbs>p,.readable .tour-section .section-heading.has-orbs>p{grid-column:1;grid-row:2}
  .readable .computer-section .section-heading.has-orbs>.orb-art,.readable .tour-section .section-heading.has-orbs>.orb-art{grid-column:1;grid-row:3;width:190px}
  .readable .local-computers{padding-inline:18px}
  .readable .org-leader{padding-inline:12px}
  .readable .org-leader strong{font-size:17px}
  .readable .initiative-top .eyebrow{max-width:calc(100% - 95px)}
  .readable .initiative-top .orb-art{width:125px;right:-13px;top:-9px}
  .readable .code-window code{font-size:14px;padding-inline:10px}
}