/* Renata page components */


/* 01  Page chassis */

:root{
  --console-h:64px;
  --nav-real:var(--nav-h);
}
@media (max-width:1079.98px){ :root{--nav-real:56px} }

html:has(.faq-console){
  scroll-padding-top:calc(var(--nav-real) + var(--console-h) + var(--s4));
}
.faq-body [id]{scroll-margin-top:0}


/* 01b  Seam ends */

.faq-seam{position:relative}
.faq-seam .crosshair{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:var(--rule);
}
.faq-seam .crosshair--l{left:calc(var(--gutter) - var(--s3) - var(--crosshair))}
.faq-seam .crosshair--r{right:calc(var(--gutter) - var(--s3) - var(--crosshair))}
@media (max-width:520px){
  .faq-seam .crosshair{display:none}
}


/* Panel 01  Masthead */

.faq-mast{grid-column:2/span 7}
.faq-mast-spec{grid-column:10/span 3;align-self:end}

.faq-mast__desig{
  display:grid;
  gap:var(--s4);
  justify-items:start;
  margin-bottom:var(--s7);
}
.faq-mast__rule{display:block;width:64px;height:1px;background:var(--rule)}

/* Display volume */
.faq-h1{
  font-size:clamp(2.75rem,1.2rem + 6.6vw,6.5rem);
  line-height:.93;
  letter-spacing:-.045em;
}
.faq-mast .deck{margin-block-start:var(--s6)}

/* The masthead's datasheet */
.faq-mast-spec__label{
  padding-bottom:var(--s3);
  border-bottom:var(--border-hair);
  margin-bottom:var(--s2);
}
/* Mono law */
.faq-mast-spec__meta{
  margin-top:var(--s4);
  font-family:var(--font-sans);
  font-size:.875rem;
  font-weight:450;
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--ink-2);
  max-width:24ch;
}


/* 03  The console */

.faq-console{
  position:sticky;
  top:var(--nav-real);
  z-index:45;
  height:var(--console-h);
  background:var(--plate-hi);
  box-shadow:var(--edge-hair-lo);
}
.faq-console__inner{
  display:flex;
  align-items:center;
  gap:var(--s5);
  height:100%;
}
.faq-console__desig{flex:0 0 auto}

/* The slot */

/* Height */
.faq-field{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 auto;
  max-width:560px;
  min-height:56px;
  background:var(--plate-lo);
  box-shadow:var(--edge-down);
  border-radius:var(--radius);
}
.faq-search{
  flex:1 1 auto;
  min-width:0;
  min-height:56px;
  padding:0 var(--s4);
  background:transparent;
  border:0;
  border-radius:var(--radius);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.4;
  letter-spacing:-.005em;
}
.faq-search::placeholder{color:var(--ink);opacity:.72}
.faq-search::-webkit-search-cancel-button,
.faq-search::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.faq-search::-ms-clear{display:none}
.faq-search:focus{outline:none}

.faq-field__clear{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:var(--tap);
  height:var(--tap);
  margin-inline-end:calc(var(--s1) * -1);
  background:none;
  border:0;
  border-radius:var(--radius);
  color:var(--ink);
  cursor:pointer;
  transition:transform var(--dur-press) var(--ease-seat);
}
.faq-field__clear[hidden]{display:none}
.faq-field__clear:active{transform:translateY(1px)}
.faq-field:focus-within{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:calc(var(--focus-offset) * -1);
}

/* The lamp */
.faq-field__lamp{
  flex:0 0 auto;
  margin-inline-end:var(--s4);
  background:var(--signal-idle);
  transition:none;
}
.faq-field__lamp.is-lit{background:var(--signal)}

.faq-count{
  flex:0 0 auto;
  margin:0;
  margin-inline-start:auto;
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-2);
  white-space:nowrap;
}


/* Panel 02  The topic index */

.faq-index__head{grid-column:2/span 10}
.faq-index-sheet{grid-column:2/span 10;margin-block-start:var(--s7)}
.faq-empty{grid-column:2/span 10;margin-block-start:var(--s5)}

.fx-heads{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s8);
  padding-bottom:var(--s3);
}
.fx-head{
  display:flex;
  justify-content:space-between;
  gap:var(--s4);
  margin:0;
  padding-inline:calc(3.5ch + var(--s4) + var(--s3)) var(--s3);
}

.faq-index{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s8);
  list-style:none;
  margin:0;
  padding:0;
  border-top:var(--border-hair);
}
.fx-row{border-bottom:var(--border-hair)}
.fx-link{
  position:relative;
  display:grid;
  grid-template-columns:3.5ch auto 1fr auto;
  align-items:center;
  gap:var(--s4);
  min-height:var(--tap);
  padding-inline:var(--s3);
  color:var(--ink);
  background:transparent;
  transition:background-color var(--dur-state) var(--ease-seat);
}
.fx-link::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--bw-rule);
  background:transparent;
}
.fx-link:hover,.fx-link:focus-visible{background:var(--plate-hi)}
.fx-link:hover::before,.fx-link:focus-visible::before{background:var(--signal)}
.fx-link:hover{text-decoration:none}

.fx-n{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-2);
}
.fx-label{
  font-family:var(--font-sans);
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
}
.fx-leader{
  height:1em;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 calc(50% + .1em);
}
.fx-count{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-2);
  white-space:nowrap;
}
.fx-row.is-empty .fx-label,
.fx-row.is-empty .fx-n,
.fx-row.is-empty .fx-count{color:var(--rule)}

.faq-empty{
  max-width:var(--measure);
  color:var(--ink);
}
.faq-empty[hidden]{display:none}


.faq-cat{
  padding-block:clamp(48px,4.6vw,72px) clamp(48px,4.6vw,72px);
}

.faq-cat__head{
  grid-column:2/span 3;
  position:sticky;
  top:calc(var(--nav-real) + var(--console-h) + var(--s5));
  align-self:start;
  display:grid;
  gap:var(--s3);
  justify-items:start;
}
.faq-cat__head h2{margin-block:var(--s2) 0}

.fx-back{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  margin-block-start:var(--s3);
  min-height:var(--tap);
  color:var(--ink-2);
  font-size:.875rem;
  line-height:1.2;
}
.fx-back:hover{color:var(--ink)}
.fx-back svg{flex:0 0 auto}

.faq-rack{grid-column:6/span 7;border-top:var(--border-hair)}


/* The question row */

.faq-item{
  position:relative;
  border-bottom:var(--border-hair);
  background:transparent;
  transition:background-color var(--dur-state) var(--ease-seat);
}
.faq-item[hidden]{display:none}

/* The lit edge */
.faq-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--bw-rule);
  background:transparent;
}
.faq-item[open]{
  background:var(--plate-lo);
  box-shadow:var(--edge-down);
}
.faq-item[open]::before{background:var(--signal)}

.faq-q{
  display:grid;
  grid-template-columns:4.5ch minmax(0,1fr) 12px;
  align-items:start;
  gap:var(--s4);
  min-height:56px;
  padding:var(--s4) var(--s4);
  cursor:pointer;
  list-style:none;
  transition:background-color var(--dur-state) var(--ease-seat);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-item:not([open]) .faq-q:hover{background:var(--plate-hi)}
.faq-q:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:calc(var(--focus-offset) * -1);
}

.faq-q__n{
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.9;
  letter-spacing:.1em;
  color:var(--ink-2);
}
.faq-q__text{
  font-family:var(--font-sans);
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:pretty;
}

/* The mark */
.faq-q__mark{
  position:relative;
  width:12px;
  height:12px;
  margin-block-start:5px;
}
.faq-q__mark::before,.faq-q__mark::after{
  content:"";
  position:absolute;
  background:var(--ink-2);
}
.faq-q__mark::before{left:0;right:0;top:5px;height:1px}
.faq-q__mark::after{
  top:0;bottom:0;left:5px;width:1px;
  transform:scaleY(1);
  transform-origin:center;
  transition:transform var(--dur-state) var(--ease-seat);
}
.faq-item[open] .faq-q__mark::after{transform:scaleY(0)}
.faq-item[open] .faq-q__mark::before{background:var(--ink)}
.faq-item[open] .faq-q__n{color:var(--ink)}

.faq-a{padding:0 var(--s4) var(--s5) calc(4.5ch + var(--s4) + var(--s4))}
.faq-a p{
  margin:0;
  max-width:var(--measure);
  color:var(--ink);
  text-wrap:pretty;
}

/* Search highlight */
.faq-item mark{
  background:var(--signal);
  color:var(--ink);
  border-radius:var(--radius);
  padding:0 .1em;
}

.faq-cat[hidden],.seam[hidden]{display:none}


/* Panel 22  Contact */

.faq-help .designation{color:#4A4D51}

.faq-help__inner{grid-column:3/span 8;display:grid;gap:var(--s4);justify-items:start}
.faq-help__inner h2{margin-block:var(--s2) var(--s2)}
.faq-help__inner p a{
  display:inline-block;
  padding-block:12px;
  margin-block:-12px;
}


/* 07  The rail */

.rail--index .rail__meter{cursor:default}


/* 08  Breakpoints */

@media (max-width:1179.98px){
  .fx-heads,.faq-index{grid-template-columns:minmax(0,1fr);column-gap:0}
  .fx-head--b{display:none}
}

@media (max-width:1079.98px){
  .faq-mast,.faq-mast-spec,
  .faq-index__head,.faq-index-sheet,.faq-empty,
  .faq-cat__head,.faq-rack,
  .faq-help__inner{grid-column:1/-1}

  .faq-mast-spec{margin-block-start:var(--s7)}

  .faq-cat__head{position:static;gap:var(--s2)}
  .faq-rack{margin-block-start:var(--s5)}
  .fx-back{margin-block-start:0}

}

@media (max-width:767.98px){
  .faq-console__desig{display:none}
  .faq-console__inner{gap:var(--s4)}
  .faq-q{grid-template-columns:minmax(0,1fr) 12px;padding-inline:var(--s3)}
  .faq-q__n{display:none}
  .faq-a{padding-inline:var(--s3)}
  .fx-link{padding-inline:var(--s2);gap:var(--s3)}
}

@media (max-width:559.98px){
  .faq-count{display:none}
  .faq-field{max-width:none}
}


/* 09  Motion gate */

@media (prefers-reduced-motion:reduce){
  .faq-item,.faq-q,.fx-link,.faq-q__mark::after{transition:none!important}
}


/* 10  Forced colours */

@media (forced-colors:active){
  .faq-item[open]::before,.fx-link:hover::before{background:Highlight}
  .faq-field__lamp.is-lit{background:Highlight}
  .faq-field{border:1px solid CanvasText}
  .faq-item mark{background:Highlight;color:HighlightText}
}


/* Press */


/* Shared inline elements */

em,cite,i{font-style:normal;font-weight:520}
strong,b{font-weight:600}

code,kbd,samp{font-family:var(--font-mono);font-size:.875em;letter-spacing:.1em}


/* Column choreography */

.pr-mast-head   {grid-column:2/span 7}
.pr-mast-side   {grid-column:10/span 3;align-self:end}
.pr-glance      {grid-column:2/span 10}
.pr-pitch-head  {grid-column:2/span 3}
.pr-pitch-body  {grid-column:6/span 7}
.pr-pillars     {grid-column:2/span 10}
.pr-num-head    {grid-column:2/span 3}
.pr-num-bank    {grid-column:6/span 7}
.pr-out         {grid-column:2/span 7}
.pr-out-note    {grid-column:10/span 3;align-self:end}
.pr-angle       {grid-column:2/span 7}
.pr-story-window{grid-column:2/span 6}
.pr-story-copy  {grid-column:9/span 4;align-self:center}
.pr-hook-head   {grid-column:2/span 3}
.pr-hook-list   {grid-column:6/span 7}
.pr-faq-body    {grid-column:2/span 7}
.pr-faq-head    {grid-column:10/span 3;align-self:start}
.pr-cov         {grid-column:2/span 6}
.pr-assets      {grid-column:2/span 10}
.pr-boiler-head {grid-column:2/span 3}
.pr-quote       {grid-column:6/span 6}
.pr-contact     {grid-column:2/span 10}

/* A panel head */
.pr-head{display:grid;gap:var(--s5);align-content:start;justify-items:start}
.pr-head .deck{margin-block:0}
.pr-head .body-copy + .body-copy{margin-top:0}
.pr-sheet{margin-block-start:var(--s8)}


/* Panel 01  Masthead */

.pr-desig{display:grid;gap:var(--s4);justify-items:start;margin-bottom:var(--s7)}
.pr-desig__rule{display:block;width:64px;height:var(--bw-hair);background:var(--rule)}

.pr-title{
  font-size:clamp(2.75rem,1.2rem + 6.6vw,6.5rem);
  font-weight:620;line-height:.93;letter-spacing:-.035em;
  font-variation-settings:"opsz" 32;
}

.pr-mast-head .deck{margin-block-start:var(--s6)}
.pr-mast-head .row{margin-block-start:var(--s7)}

/* The masthead register */
.pr-meta{margin:0;border-top:var(--border-hair)}
.pr-meta__row{
  display:grid;grid-template-columns:auto minmax(var(--s5),1fr) auto;
  align-items:baseline;gap:var(--s3);
  padding-block:var(--s3);border-bottom:var(--border-hair);
}
.pr-meta__k{
  font-family:var(--font-mono);font-size:.6875rem;line-height:1.45;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);
}
.pr-meta__fill{
  height:1em;align-self:center;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 calc(50% + .1em);
}
.pr-meta__v{
  margin:0;text-align:end;
  font-size:.9375rem;font-weight:450;letter-spacing:-.01em;color:var(--ink);
}


/* Panel 03  At a glance */

.pr-spec{border-top:var(--border-hair)}
.pr-spec__row{
  display:grid;grid-template-columns:minmax(9rem,2fr) minmax(0,9fr);
  column-gap:var(--s7);align-items:baseline;
  padding-block:var(--s4);border-bottom:var(--border-hair);
}
.pr-spec__k{
  font-family:var(--font-mono);font-size:.75rem;line-height:1.6;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);
}
.pr-spec__v{margin:0;max-width:var(--measure);text-wrap:pretty}


/* Panel 04  The pitch */

.pr-def{border-top:var(--border-hair)}
.pr-def__row{
  display:grid;grid-template-columns:minmax(8rem,2fr) minmax(0,9fr);
  column-gap:var(--s7);
  padding-block:var(--s6);border-bottom:var(--border-hair);
}
.pr-def__k{
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);align-self:start;
}
.pr-def__v{margin:0;max-width:var(--measure);text-wrap:pretty}


/* Panel 05  Four pillars */

.pr-cells{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:var(--border-hair);list-style:none;margin:var(--s7) 0 0;padding:0;
}
.pr-cell{padding:var(--s6);border-bottom:var(--border-hair);min-width:0}
.pr-cell:nth-child(2n){border-inline-start:var(--border-hair)}
.pr-cell:nth-child(2n+1){padding-inline-start:0}
.pr-cell__n{
  display:block;
  font-family:var(--font-mono);font-size:.625rem;line-height:1;
  letter-spacing:.18em;color:var(--ink-2);
}
.pr-cell__t{
  display:block;margin-block-start:var(--s4);
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:560;
  line-height:1.14;letter-spacing:-.015em;color:var(--ink);
}
.pr-cell__b{margin-block-start:var(--s4);max-width:46ch;text-wrap:pretty}
.pr-plus{margin-block-start:var(--s6);max-width:var(--measure)}


/* Panel 06  Numbers that hold up */

.pr-figs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:var(--border-hair);list-style:none;margin:0;padding:0;
}
.pr-fig{padding:var(--s5) var(--s5) var(--s6);border-bottom:var(--border-hair);min-width:0}
.pr-fig:nth-child(2n){border-inline-start:var(--border-hair)}
.pr-fig:nth-child(2n+1){padding-inline-start:0}
.pr-fig__n{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(2rem,1.2rem + 2.4vw,3rem);
  line-height:.9;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"case" 1;
  white-space:nowrap;
}
.pr-fig__n .suffix{font-size:.5em;vertical-align:.42em;color:var(--ink-2)}
.pr-fig__l{
  display:block;margin-block-start:var(--s4);
  padding-block-start:var(--s3);border-top:var(--border-hair);
  text-wrap:pretty;
}
.pr-nums-note{margin-block-start:var(--s6)}


/* Panel 07  Export formats */

.pr-ports{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  border-block:var(--border-hair);
  list-style:none;margin:var(--s7) 0 0;padding:0;
}
.pr-port{
  display:grid;justify-items:center;gap:var(--s4);
  padding-block:var(--s6);min-width:0;
}
.pr-port + .pr-port{border-inline-start:var(--border-hair)}
/* The jack's inner ring */
.pr-port .port{position:relative}
.pr-port .port::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--rule);
}
.pr-port .format-tag{border:0;padding:0;color:var(--ink);text-transform:none}
.pr-out-note{
  max-width:34ch;
  border-top:var(--border-hair);padding-block-start:var(--s4);
  margin-block-start:0;
}


/* Panel 08  The angle */

.pr-angle .body-copy{max-width:58ch}
.pr-angle__close{margin-block-start:var(--s6);font-weight:520}


/* Panel 09  The story */

.pr-story-fig{margin:0}
.pr-portrait{--ar:4/3}
.pr-portrait img{object-position:64% 34%}
.pr-figcap{margin-block-start:var(--s3);
  border-top:var(--bw-hair) solid var(--rule);padding-block-start:var(--s3)}
.pr-figcap .legend{margin-inline-end:var(--s3)}


/* Panel 10  Suggested story hooks */

.pr-hooks{border-top:var(--border-hair);list-style:none;margin:0;padding:0}
.pr-hook{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);column-gap:var(--s5);
  padding-block:var(--s5);border-bottom:var(--border-hair);
}
.pr-hook__n{
  font-family:var(--font-mono);font-size:.625rem;line-height:2;
  letter-spacing:.18em;color:var(--ink-2);
}
.pr-hook__t{display:block;font-weight:600}
.pr-hook__b{display:block;margin-block-start:var(--s2);color:var(--ink-2);max-width:56ch}


/* Panel 11  Press FAQ */

.pr-qa{border-top:var(--border-hair)}
.pr-qa__row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  column-gap:var(--s6);
  padding-block:var(--s6);border-bottom:var(--border-hair);
}
.pr-qa__q{
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);font-weight:560;
  line-height:1.2;letter-spacing:-.015em;align-self:start;
}
.pr-qa__a{margin:0;max-width:var(--measure);text-wrap:pretty}


/* Panel 12  Press coverage */

.pr-placeholder{
  display:inline-block;margin-block-start:var(--s5);
  padding:var(--s3) var(--s4);
  background:var(--plate-lo);box-shadow:var(--edge-down);
  font-family:var(--font-mono);font-size:.6875rem;line-height:1.45;
  letter-spacing:.12em;color:var(--ink);
}
.panel--recess .pr-placeholder{background:var(--plate);box-shadow:var(--edge-up)}


/* Panel 13  Assets */

.pr-sub{margin-block-start:var(--s8)}
.pr-assets .pg-intro{max-width:var(--measure)}

/* The brand cells */
.pr-brand{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);margin-block-start:var(--s5);
}
.pr-brand-cell{margin:0;min-width:0}
.pr-brand-cell .window{--ar:16/9}
.pr-brand-cell .window img{object-fit:contain;padding:var(--s4) var(--s5)}
.pr-brand-cell figcaption{margin-block-start:var(--s3)}

/* The download keys */
.pr-brand-cap{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s2) var(--s4);justify-content:space-between;
}
.pr-brand-name{font-size:.9375rem;font-weight:500;color:var(--ink)}
.pr-dls{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pr-dl{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding-inline:var(--s4);
  font-size:.875rem;line-height:1;text-decoration:none;color:var(--ink);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:background-color var(--dur-state) var(--ease-seat),
             box-shadow var(--dur-press) var(--ease-seat),
             transform var(--dur-press) var(--ease-seat);
}
.pr-dl:hover{background:var(--plate-hi);box-shadow:inset 0 0 0 1px var(--ink);
  text-decoration:none}
.pr-dl:active{transform:translateY(1px);
  box-shadow:inset 0 0 0 1px var(--ink),var(--edge-down)}

/* The asset list */
.pr-assets-list{
  border-top:var(--border-hair);list-style:none;
  margin:var(--s7) 0 0;padding:0;
}
.pr-asset{
  display:grid;grid-template-columns:minmax(7rem,2fr) minmax(0,9fr);
  column-gap:var(--s7);
  padding-block:var(--s5);border-bottom:var(--border-hair);
}
.pr-asset__k{
  font-family:var(--font-mono);font-size:.75rem;line-height:1.6;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);
}
.pr-asset__v{margin:0;max-width:var(--measure);text-wrap:pretty}

/* The screenshot sheet */
.pr-shots{
  --shot-ar:1350/372;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--s7);margin-block-start:var(--s5);
}
.pr-shot{margin:0;min-width:0}
.pr-shot figcaption{margin-block-start:var(--s3)}
.pr-shot--gen .window,
.pr-shot--editor .window,
.pr-shot--ls .window{--ar:var(--shot-ar)}

/* Crops */

/* Generator */
.pr-shot--gen .pillar-crop{
  width:180.2632%;
  transform:translate(-2.1898%,-30.3475%);
}

/* Sample editor */
.pr-shot--editor .pillar-crop{
  width:100%;
  transform:translate(0,-15.5963%);
}

/* Main player */
.pr-shot--player .pillar-crop{
  width:100%;
  transform:translate(0,-19.0754%);
}

/* Light synth */
.pr-shot--ls .pillar-crop{
  width:100%;
  transform:translate(0,-16.2470%);
}


/* Panel 14  Boilerplate */

.pr-quote{
  margin:0;
  font-size:clamp(1.125rem,.98rem + .62vw,1.5rem);
  font-weight:380;line-height:1.42;letter-spacing:-.008em;
  color:var(--window-ink);max-width:46ch;
  border-top:var(--bw-rule) solid var(--window-edge);
  padding-block-start:var(--s5);
}


/* Panel 15  Contact */

.pr-contact-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s7);
  margin-block-start:var(--s7);
  border-top:var(--border-hair);padding-block-start:var(--s6);
}
.pr-contact-grid .body-copy{max-width:46ch}


.pr-mast-side .pr-meta__v a,
.pr-spec__v a,
.pr-qa__a a,
.pr-asset__v a,
.pr-assets .pg-intro a,
.pr-contact-grid a{
  display:inline-block;
  min-height:var(--tap);
  padding-block:12px;
  margin-block:-12px;
}
/* The "X" link */
.pr-tap--wide{position:relative}
.pr-tap--wide::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--tap);
  height:var(--tap);
  transform:translate(-50%,-50%);
}


/* Breakpoints */

@media (max-width:1079.98px){
  .pr-mast-head,.pr-mast-side,.pr-glance,.pr-pitch-head,.pr-pitch-body,
  .pr-pillars,.pr-num-head,.pr-num-bank,.pr-out,.pr-out-note,.pr-angle,
  .pr-story-window,.pr-story-copy,.pr-hook-head,.pr-hook-list,
  .pr-faq-head,.pr-faq-body,.pr-cov,.pr-assets,
  .pr-boiler-head,.pr-quote,.pr-contact{grid-column:1/-1}
  .pr-mast-side{align-self:start;margin-block-start:var(--s8)}
  .pr-story-window{order:-1}
  .pr-num-bank,.pr-hook-list,.pr-pitch-body,.pr-faq-body,
  .pr-quote{margin-block-start:var(--s7)}
  .pr-out-note{margin-block-start:var(--s7);max-width:var(--measure);
    align-self:start}
  .pr-ports{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pr-port:nth-child(4n+1){border-inline-start:0}
  .pr-port:nth-child(n+5){border-top:var(--border-hair)}
}

@media (max-width:767.98px){
  .pr-spec__row,.pr-def__row,.pr-qa__row,.pr-asset{
    grid-template-columns:minmax(0,1fr);row-gap:var(--s3);
  }
  .pr-cells,.pr-figs,.pr-brand,.pr-contact-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .pr-cell,.pr-fig{padding-inline:0}
  .pr-cell:nth-child(2n),.pr-fig:nth-child(2n){border-inline-start:0}
  .pr-hook{grid-template-columns:2.5rem minmax(0,1fr);column-gap:var(--s4)}


  /* Sample editor */
  .pr-shot--editor .window{--ar:723/287}
  .pr-shot--editor .pillar-crop{width:149.3776%}

  /* Light synth */
  .pr-shot--ls .window{--ar:16/9}
}

@media (max-width:479.98px){
  .pr-ports{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-port:nth-child(2n+1){border-inline-start:0}
  .pr-port:nth-child(n+3){border-top:var(--border-hair)}
  .pr-brand-cell .window img{padding:var(--s4) var(--s5)}
}


/* Print */

@media print{
  .pr-spec__row,.pr-def__row,.pr-qa__row,.pr-asset,.pr-hook,
  .pr-cell,.pr-fig,.pr-ports,.pr-meta__row{break-inside:avoid;border-color:#999}
  .pr-quote{color:#000;border-top-color:#000}
  .pr-placeholder{background:transparent;box-shadow:none;border:1px solid #999}
  .pr-fig__n,.pr-fig__n .suffix{color:#000}
}


/* Forced colours */

@media (forced-colors:active){
  .pr-placeholder{border:1px solid CanvasText}
  .pr-port .port::after{box-shadow:none;border:1px solid CanvasText}
  .pr-quote{border-top-color:CanvasText}
}

/* Fig 13.2 */

.pr-faceplate{
  --ar:1350/372;
  aspect-ratio:1350/372;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  padding:clamp(14px,2.2vw,28px) clamp(16px,2.6vw,34px);
  background:var(--plate);
  box-shadow:var(--edge-up);
}
.pr-faceplate__l{min-width:0}
.pr-faceplate__word{
  font-family:var(--font-sans);
  font-weight:620;
  font-size:clamp(26px,4.2vw,54px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}
.pr-faceplate__say{
  font-family:var(--font-sans);
  font-size:clamp(12px,1.2vw,16px);
  color:var(--ink-2);
  margin:var(--s2) 0 0;
}
.pr-faceplate__r{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--s3);
  flex:0 0 auto;
}
.pr-faceplate__hex{
  font-family:var(--font-mono);
  font-size:clamp(9px,1vw,13px);
  letter-spacing:.1em;
  color:var(--ink-2);
  white-space:nowrap;
}
.pr-faceplate__bar{display:flex;gap:3px}
.pr-faceplate__bar i{
  width:clamp(5px,.7vw,9px);
  height:clamp(10px,1.4vw,18px);
  background:var(--signal);
}
.pr-faceplate__bar i.off{background:rgba(22,24,26,.16)}

@media (max-width:767.98px){
  .pr-faceplate{
    aspect-ratio:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--s3);
  }
  .pr-faceplate__r{align-items:flex-start}
}

/* Brand preview card */
.pr-brand-plate{
  position:relative;
  aspect-ratio:16/9;
  background:var(--plate-hi);
  box-shadow:var(--edge-up);
  overflow:hidden;
}
.pr-brand-plate img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  max-width:none;max-height:none;
  padding:clamp(14px,2.4vw,32px);
  box-sizing:border-box;
  object-fit:contain;object-position:center;
  display:block;
}
.pr-brand-plate .led{position:absolute;right:10px;bottom:10px}