/* One's product story and generic examples of the current player UI. */
.op-app-showcase{grid-template-columns:.9fr 1.15fr;gap:30px;padding-block:42px 65px;min-height:720px}.op-app-showcase h1{font-size:clamp(48px,5.1vw,74px)}.op-app-showcase .op-lead{max-width:420px;font-size:18px}.op-hero-points{display:flex;flex-wrap:wrap;gap:17px;margin-top:36px;max-width:440px}.op-hero-points span{display:flex;align-items:center;gap:7px;font-size:12px;color:#506453}.op-hero-points svg{width:17px;height:17px}.op-hero-devices{height:640px;position:relative;isolation:isolate}.op-hero-devices:before{content:'';position:absolute;inset:80px -20px 25px 0;border-radius:48% 52% 35% 60%;background:#e5ebdd;transform:rotate(-9deg);z-index:-1}.op-hero-devices .op-phone{max-width:none!important;width:298px;height:640px;transform:none!important}.op-hero-personal{position:absolute;left:0;top:0;transform:rotate(-8deg) scale(.84);transform-origin:top left;filter:drop-shadow(0 16px 18px #18362915)}.op-hero-environment{position:absolute;right:0;top:53px;transform:rotate(7deg) scale(.87);transform-origin:top right}.op-hero-caption{position:absolute;bottom:2px;left:15px;font-size:29px;line-height:1.1;color:#07513e;transform:rotate(-6deg)}
.op-phone{position:relative;color:#25313e}.op-phone .op-app-top{height:52px;padding:8px 10px;gap:8px}.op-app-top>svg{width:18px}.op-environment-trigger{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e5e9e5;border-radius:24px;padding:8px 6px;background:white;box-shadow:0 2px 5px #00000006;color:#25313e;font:inherit}.op-environment-trigger strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.op-environment-trigger img{width:15px;height:18px}.op-environment-trigger svg{width:12px;height:12px;transform:rotate(90deg)}.op-profile-trigger{border:0;border-radius:50%;background:#e8eddf;color:#526a41;width:26px;height:26px;font-size:9px}.op-app-hero{background:#edf1e9;color:#25313e;padding:20px 15px}.op-app-hero:before{display:none}.op-app-hero h4{margin-top:9px;font-size:25px}.op-app-hero>small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#718264}.op-app-hero p{font-size:11px;color:#667563}.op-next{background:var(--op-brand);color:var(--op-on-brand);padding:14px}.op-next>small,.op-next p{color:inherit}.op-next h4{font-size:21px}.op-next .op-brand-button{background:#fff;color:#25313e;font-size:12px}.op-phone .op-app-content{padding:12px}.op-phone .op-app-nav{grid-template-columns:repeat(5,1fr)}.op-phone .op-app-nav button{font-size:8px;text-decoration:none}.op-phone .op-app-nav button svg{width:32px;height:25px;padding:3px 6px;border-radius:20px}.op-phone .op-app-nav button[aria-pressed=true] svg{background:#e7eedb;color:#54723b}.op-phone .op-quick button{font-size:9px}.op-phone .op-app-top button{cursor:pointer}.op-environment-shade{position:absolute;inset:86px 0 0;background:#16261c55;z-index:8;padding:0 8px}.op-environment-menu{border-radius:15px;background:#fff;padding:16px 12px;box-shadow:0 12px 28px #0002}.op-switch-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;font-size:13px}.op-switch-heading button{border:0;background:none;color:#74808b;padding:2px}.op-switch-heading svg{width:17px}.op-environment-option{display:flex;align-items:center;gap:12px;border:0;border-radius:10px;background:white;width:100%;padding:14px 10px;text-align:left;color:#29323f}.op-environment-option>svg:first-child{width:24px;height:24px;color:#496643}.op-environment-option>svg:last-child{margin-left:auto;width:17px;visibility:hidden}.op-environment-option[aria-pressed=true]{background:#eef3e7;color:#476836}.op-environment-option[aria-pressed=true]>svg:last-child{visibility:visible}.op-environment-option strong{font-size:12px}.op-environment-option small,.op-switch-personal small{display:block;font-size:9px;color:#78828a;margin-top:4px}.op-switch-personal{display:flex;align-items:center;gap:12px;width:100%;padding:17px 8px 3px;margin-top:12px;border:0;border-top:1px solid #ecefea;background:white;text-align:left;color:#25313e;font-size:12px}.op-switch-personal>svg:last-child{margin-left:auto;width:15px}.op-personal-heading{padding:19px 16px;background:#e9f0e8}.op-personal-heading h4{font-size:27px;margin:6px 0}.op-personal-heading>small{font-size:8px;letter-spacing:1.5px}.op-personal-heading p{font-size:10px;line-height:1.6;color:#607267}.op-personal-body{padding:11px}.op-person-card{display:flex;gap:10px;align-items:center;background:white;border-radius:12px;padding:12px;border:1px solid #e5eae3}.op-person-card strong{font-size:13px}.op-person-card small{display:block;font-size:9px;color:#78847b;margin-top:5px}.op-personal-body h5{display:flex;align-items:center;gap:8px;margin:17px 0 10px;font-size:12px}.op-personal-body h5 svg{width:17px;height:17px;color:#07513e}.op-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.op-stat-grid>div{display:flex;align-items:center;flex-direction:column;background:white;border:1px solid #e4eae3;border-radius:12px;padding:11px 3px;gap:5px}.op-stat-grid svg{width:17px;height:17px;color:#07513e}.op-stat-grid b{font-size:18px}.op-stat-grid small{font-size:9px;color:#708078}.op-distribution{margin-top:12px;background:white;border:1px solid #e4eae3;border-radius:12px;padding:12px;font-size:10px}.op-distribution>strong{font-size:12px;display:block;margin-bottom:10px}.op-distribution>div{display:flex;position:relative;gap:7px;padding:7px 0;border-bottom:1px solid #f0f3ed}.op-distribution i{width:7px;height:7px;border-radius:50%;background:#afcbb2;margin-top:2px}.op-distribution b{margin-left:auto}.op-personal-body .op-action-row{font-size:11px;padding:11px 9px}.op-personal-body .op-action-row small{font-size:8px}.op-round-filters{display:flex;background:#eaf0e7;padding:4px;border-radius:20px;gap:3px;margin-bottom:12px}.op-round-filters button{border:0;border-radius:20px;padding:7px;background:none;font-size:9px;color:#60705f;flex:1}.op-round-filters button[aria-pressed=true]{background:#07513e;color:white}.op-round-row{width:100%;display:flex;align-items:center;text-align:left;gap:9px;padding:14px 9px;margin:9px 0;border:1px solid #e2e9df;background:white;border-radius:12px;color:#25313e}.op-round-row strong{font-size:11px;display:block}.op-round-row small{display:block;font-size:8px;color:#73816c;margin-top:5px}.op-round-row>b{margin-left:auto;color:#526f3c;font-size:17px}.op-round-row>svg{width:12px}.op-round-icon{display:grid;place-items:center;width:29px;height:29px;background:#e8f1e5;border-radius:50%;color:#07513e}.op-round-icon svg{width:17px;height:17px}.op-follow-row{display:flex;gap:8px;align-items:center;border-bottom:1px solid #e1e8dc;padding:15px 0}.op-follow-row strong{font-size:11px}.op-follow-row button{margin-left:auto;border:0;border-radius:20px;background:#edf2e5;padding:7px;font-size:9px;color:#4b693a}.op-arrows button{display:grid;place-items:center}.op-arrows svg{width:21px;height:21px}
@media(min-width:1400px){.op-hero-personal{transform:rotate(-8deg) scale(.92)}.op-hero-environment{transform:rotate(7deg) scale(.95)}.op-hero-devices{height:680px}}
@media(max-width:1100px) and (min-width:761px){.op-app-showcase{grid-template-columns:.9fr 1fr;gap:12px;min-height:650px}.op-hero-devices{height:540px}.op-hero-personal{transform:rotate(-8deg) scale(.64)}.op-hero-environment{transform:rotate(7deg) scale(.68);top:58px}.op-hero-caption{font-size:24px}.op-app-showcase h1{font-size:46px}.op-app-showcase .op-lead{font-size:16px}}
@media(max-width:760px){.op-app-showcase{grid-template-columns:1fr;gap:30px;min-height:0;padding-top:22px;padding-bottom:45px}.op-app-showcase h1{font-size:49px}.op-app-showcase .op-lead{font-size:17px}.op-hero-points{gap:14px;margin-top:24px}.op-hero-points span{font-size:10px}.op-hero-devices{height:555px;max-width:470px;width:100%;margin:auto}.op-hero-personal{transform:rotate(-7deg) scale(.69)}.op-hero-environment{transform:rotate(7deg) scale(.72);top:52px;right:8px}.op-hero-caption{font-size:25px;bottom:0}.op-hero-devices:before{inset:40px 0 35px}.op-app-hero{padding:20px 15px}}
@media(max-width:370px){.op-hero-devices{height:485px}.op-hero-personal{transform:rotate(-7deg) scale(.57)}.op-hero-environment{transform:rotate(7deg) scale(.63)}.op-hero-caption{font-size:22px}.op-app-showcase h1{font-size:43px}}
@media(prefers-reduced-motion:no-preference){.op-hero-environment{animation:one-arrive .9s ease-out both}.op-hero-personal{animation:one-arrive 1.1s ease-out both}@keyframes one-arrive{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}}

.op-phone .op-hole{background:white;border:1px solid #e2e8df;color:#25313e;justify-content:flex-start;gap:24px;padding:17px}.op-phone .op-hole>span:first-child{padding-right:23px;border-right:1px solid #e9ede6;font-size:10px;color:#708661}.op-phone .op-hole b{font-size:52px;color:#25313e;margin-top:7px}.op-phone .op-hole>span:last-child{font-size:11px;line-height:1.8}.op-phone .op-hole strong{font-size:17px;color:#708661}.op-phone .op-stepper{background:white;border:1px solid #e2e8df;border-radius:13px;margin:15px 0;padding:18px 8px}.op-phone .op-stepper button{width:38px;height:38px;color:#708661}.op-phone .op-stepper b{font-size:44px}.op-detail-badges{font-size:10px;background:#e7efe1;border-radius:20px;padding:10px;text-align:center}

.op-personal-nav{display:none;grid-template-columns:repeat(3,1fr);background:white;border-top:1px solid #e0e7db;padding:9px 4px 7px}.op-personal-nav button{display:grid;justify-items:center;gap:5px;border:0;background:none;color:#758176;font:9px Roboto,Arial,sans-serif;padding:4px}.op-personal-nav button[aria-pressed=true]{color:#07513e;font-weight:700}.op-personal-nav svg{width:20px;height:20px}.op-phone.is-personal .op-personal-nav{display:grid}.op-phone.is-personal .op-app-nav{display:none}
@media(max-width:760px){.op-hero-devices:before{transform:none}.op-hero-devices{overflow:clip;overflow-clip-margin:12px}}

.op-custom-photo .op-app-hero:before{display:block;height:62px;margin:-20px -15px 14px;background-image:var(--op-photo);background-size:cover;background-position:center}.op-environment-trigger [data-op-logo]{object-fit:contain;max-width:24px}

/* Hide the browser's rectangular swatch behind the same round custom-color control as Sponsoring. */
.op-colors .op-custom-color{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid #d7dfd2;border-radius:50%;background:#eef1e9;color:#07513e;overflow:hidden;cursor:pointer;transition:background .15s,outline-color .15s}
.op-colors .op-custom-color input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.op-custom-color svg{width:19px;height:19px;pointer-events:none}.op-custom-color:hover{background:#e3eadd}.op-custom-color:focus-within{outline:3px solid #85632d;outline-offset:3px}

/* Studio controls share the same radius, height and system upload treatment. */
.op-controls .op-upload,.op-controls input:not([type=color]),.op-controls select,.op-controls button#op-reset{border-radius:9px;min-height:46px;border-color:#bcc9bc;font-family:inherit}
.op-controls .op-upload{background:white;padding:12px 18px}.op-controls button#op-reset{font-size:14px;font-weight:600;padding:12px 18px;color:#405849}
.op-controls details{border-top:1px solid #e1e6da;margin-top:19px;padding-top:7px}.op-controls summary{display:flex;align-items:center;gap:12px;width:fit-content;padding:10px 2px;list-style:none;font-weight:600;color:#405849;border-radius:5px}.op-controls summary::-webkit-details-marker{display:none}.op-controls summary::marker{content:''}.op-controls summary svg{width:16px;height:16px;transition:transform .18s}.op-controls details[open]>summary svg{transform:rotate(90deg)}.op-controls summary:focus-visible{outline:2px solid #54744f;outline-offset:4px}
.op-controls .op-select-wrap{display:block;position:relative}.op-controls .op-select-wrap select{appearance:none;-webkit-appearance:none;width:100%;min-width:155px;padding:12px 43px 12px 14px;background:white}.op-select-wrap>svg{position:absolute;right:15px;top:50%;width:16px;height:16px;transform:translateY(-50%) rotate(90deg);pointer-events:none;color:#627460}
.op-photo-field{display:grid;gap:7px;min-width:0;flex:1;max-width:340px}.op-field-label{font-size:13px;font-weight:600}.op-photo-field .form-row{position:relative;min-width:0}.op-photo-field .upload-input{position:absolute;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0!important}.op-photo-field .upload-dropzone{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:68px;border:1px dashed #aaba9e;border-radius:9px;background:#f7f9f3;cursor:pointer}.op-photo-field .upload-dropzone:hover{background:#edf2e6;border-color:#617b54}.op-photo-field .upload-dropzone:focus-visible,.op-photo-field .form-row:focus-within{outline:2px solid #54744f;outline-offset:3px;border-radius:9px}.op-photo-field .upload-dropzone-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e6eddc;color:#587348;font-size:23px;flex:none}.op-photo-field .upload-dropzone-copy{display:grid;gap:4px;min-width:0}.op-photo-field .upload-dropzone-copy strong{font-size:13px}.op-photo-field [data-upload-filename]{font-size:11px;color:#71806c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.op-controls details .op-control-row{align-items:flex-start}.op-controls details #op-reset{margin-top:24px}
@media(max-width:760px){.op-photo-field{max-width:none;width:100%;flex:auto}.op-controls details #op-reset{margin-top:0}.op-controls .op-select-wrap select{min-width:0}}

/* Leave room for the tilted phones above and below the overlapping composition. */
@media(max-width:760px){
  .op-app-showcase{grid-template-columns:minmax(0,1fr)}
  .op-hero-devices{min-width:0;height:630px;overflow:visible}
  .op-hero-personal{top:40px}
  .op-hero-environment{top:90px}
  .op-hero-caption{bottom:0}
}
@media(max-width:370px){.op-hero-devices{height:560px}}