/* Revision 38: typography sits within the photography; three source-derived
   screen examples and the user's untouched desktop screenshot. */
.power-transition { position:relative; isolation:isolate; }
.power-copy {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  border:0;
  padding:0;
  margin:auto;
  height:fit-content;
  text-align:left;
  pointer-events:none;
}
.power-copy h2 { color:#f6f7f3; font-size:clamp(40px,5vw,68px); line-height:1.4; letter-spacing:-.04em; text-shadow:0 2px 22px #0004; }
.power-copy h2 br { display:block; }
.power-photo { height:clamp(430px,calc(100svh - 120px),760px); }
.power-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0b100ed9 0%,#0b100e70 34%,#0b100e00 70%); pointer-events:none; }

#possibilities .screen-style-switches { grid-template-columns:1fr; }

.editor-story { background:#e9ece7; }
.editor-story-layout { padding:42px 0 36px; }
.editor-story-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:30px; }
.editor-story-heading .eyebrow { margin-bottom:15px; }
.editor-story-heading h2 { margin:0; font-size:clamp(30px,3vw,42px); line-height:1.35; }
.editor-story-heading>p { font-size:13px; line-height:1.8; color:#65705f; margin-bottom:3px; }
.editor-demonstration { width:min(100%,calc((100svh - 285px)*1.771)); margin:0 auto; }
.editor-demonstration img { display:block; width:100%; height:auto; border:1px solid #c9d0c5; box-shadow:0 18px 45px #26332512; }

.material-story { background:#fff; }
.material-story .material-layout { display:block; padding:18px 0 0; border:0; }
.material-layout>.eyebrow { margin:0 0 10px; }
.material-visual {
  --material-height:min(calc(100svh - 125px),calc((100vw - var(--gutter)*2)/1.5267658),760px);
  position:relative;
  width:calc(var(--material-height)*1.5267658);
  height:var(--material-height);
  margin:0 auto;
  isolation:isolate;
}
.material-visual::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(to bottom,#fff0 74%,#ffffffde 81%,#fff 87%); pointer-events:none; }
.material-story .texture-figure {
  position:absolute; inset:0; width:100%; height:100%; margin:0;
}
.material-story .texture-figure button { height:100%; }
.material-visual h2 { position:absolute; z-index:2; top:55%; left:0; width:100%; margin:0; color:#eff1e9; text-align:center; font-size:clamp(30px,3vw,44px); font-weight:400; line-height:1.38; letter-spacing:-.025em; text-shadow:0 2px 15px #0006; pointer-events:none; }
.material-copy { position:absolute; z-index:2; left:50%; bottom:38px; transform:translateX(-50%); width:min(1040px,calc(100vw - var(--gutter)*2)); display:grid; grid-template-columns:1.55fr 1fr; gap:64px; }
.material-copy p { margin:0; font-size:13px; line-height:1.85; color:#535f53; }
.material-story+.hardware-band { background:#fff; }
.material-story+.hardware-band .hardware { border-top:0; }

@media(max-width:980px) {
  .editor-story-heading { gap:25px; }
  .editor-story-heading h2 { font-size:30px; }
  .editor-story-heading>p { font-size:12px; }
}
@media(min-width:761px) and (max-width:980px) {
  .material-story .material-layout { padding-bottom:30px; }
  .material-visual { height:auto; padding-top:var(--material-height); }
  .material-story .texture-figure { height:var(--material-height); }
  .material-visual::after { bottom:auto; height:var(--material-height); background:linear-gradient(to bottom,#fff0 77%,#ffffffcc 92%,#fff 100%); }
  .material-visual h2 { top:calc(var(--material-height)*.55); }
  .material-copy { position:relative; left:auto; bottom:auto; transform:none; width:100%; margin-top:-8px; gap:30px; }
}
@media(max-width:760px) {
  .power-copy { padding:0; inset:auto 0 52px; }
  .power-copy h2 { font-size:clamp(29px,8vw,42px); line-height:1.55; }
  .power-copy h2 br { display:block; }
  .power-photo { height:clamp(380px,65svh,570px); aspect-ratio:auto; }
  .power-photo::after { background:linear-gradient(0deg,#0b100ec9 0%,#0b100e12 75%); }
  #possibilities .screen-style-switches { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #possibilities .screen-style-switches button { gap:7px; padding:12px 8px; font-size:12px; }
  #possibilities .screen-style-switches button::after { display:none; }
  .editor-story-layout { padding:40px 0; }
  .editor-story-heading { display:block; margin-bottom:27px; }
  .editor-story-heading .eyebrow { margin-bottom:18px; }
  .editor-story-heading h2 { font-size:30px; }
  .editor-story-heading>p { margin:16px 0 0; font-size:12px; }
  .editor-demonstration { width:calc(100% + 24px); margin:0 -12px; }
  .material-story .material-layout { padding:30px 0 24px; }
  .material-layout>.eyebrow { margin:0 0 22px; }
  .material-visual { --material-height:calc((100vw - 24px)/1.5267658); width:calc(100vw - 24px); height:auto; padding-top:var(--material-height); margin:0 calc(12px - var(--gutter)); }
  .material-story .texture-figure { width:100%; height:var(--material-height); margin:0; }
  .material-visual::after { bottom:auto; height:var(--material-height); background:linear-gradient(to bottom,#fff0 80%,#ffffffb8 93%,#fff 100%); }
  .material-visual h2 { top:calc(var(--material-height)*.53); font-size:clamp(23px,6.15vw,32px); line-height:1.36; }
  .material-copy { position:relative; left:auto; bottom:auto; transform:none; width:auto; display:block; margin:-3px calc(var(--gutter) - 12px) 0; }
  .material-copy p { font-size:12px; line-height:1.9; }
  .material-copy p+p { margin-top:13px; }
}