/* The sign-in page: the only branded surface in this app. Every console below it picks a skin to
   say WHICH DOOR you are at; this one says whose product it is.

   IT IS LIGHT IN BOTH SYSTEM THEMES, on purpose. The brand is warm paper, persian blue and cut
   apricot -- a dark variant of that is not the same brand quietly dimmed, it is a different one,
   and this page exists to look like the board it came off. `color-scheme: light` is what keeps
   the browser's own form chrome from re-tinting itself underneath the design.

   Apricot and slate are FILLS AND RULES, never text: on this ground they measure 1.41:1 and
   1.87:1. Text is ink (14.3 on paper, 16.0 on card), blue (6.4 / 7.1) or muted (5.3 / 5.9), or
   paper on blue (7.1). */
:root{
  color-scheme: light;
  --paper:#f5efe6;
  --paper-lo:#efe6da;          /* the ground, one step down, for the page gradient */
  --card:#fffcf7;
  --blue:#2e52a8;
  --blue-dk:#22407f;
  --ink:#221f1c;
  --muted:#6b6156;
  --apricot:#efc49e;
  --apricot-dk:#e0a878;
  --slate:#a9b3b8;
  --line:#e2d6c6;
  --line-2:#d3c3ae;
  --err:#9c3218;
  --serif:"EB Garamond",Garamond,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
          Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;padding:40px 20px;min-height:100%;
  background:linear-gradient(168deg,var(--paper) 0%,var(--paper-lo) 100%);
  color:var(--ink);
  font:16px/1.55 var(--sans);
  display:grid;place-items:center;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

/* --- the collage -------------------------------------------------------------------------------
   Fixed behind everything and deaf to the pointer. The shapes are torn rather than geometric
   because that is the whole language of the board this came from: a rectangle with a clean edge
   is a UI panel, and the same rectangle with a deckle is a piece of paper somebody put there. */
.collage{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.c-apricot{fill:var(--apricot)}
.c-apricot-dk{fill:var(--apricot-dk)}
.c-slate{fill:var(--slate)}
.c-blue{fill:var(--blue)}
.c-card{fill:var(--card)}
.c-line{fill:none;stroke:var(--blue);stroke-width:2.5;opacity:.55}
.c-grain{opacity:.055;mix-blend-mode:multiply}

/* THE COLLAGE DOES NOT SURVIVE A PHONE, and hiding half of it is not the fix. The board is a
   landscape composition with its shapes at the edges; `slice` on a tall narrow viewport crops to
   the MIDDLE, which is the one part deliberately left empty for the form. So the whole thing goes
   and two corner sheets take its place, sized for the screen they are on. Cut edges rather than
   torn ones here: a deckle at this scale is a few pixels of noise that reads as a rendering
   fault, not as paper. */
@media (max-width:640px){
  .collage{display:none}
  body::before,body::after{
    content:"";position:fixed;z-index:0;pointer-events:none;
  }
  body::before{
    top:-64px;left:-72px;width:210px;height:170px;background:var(--apricot);
    transform:rotate(-8deg);
    clip-path:polygon(3% 7%,40% 1%,73% 10%,100% 4%,96% 48%,100% 95%,60% 100%,24% 92%,0 98%,5% 50%);
  }
  body::after{
    right:-64px;bottom:-70px;width:236px;height:200px;background:var(--slate);
    transform:rotate(6deg);
    clip-path:polygon(4% 6%,38% 0,70% 11%,100% 3%,95% 45%,100% 96%,63% 100%,27% 90%,0 97%,6% 49%);
  }
}
@media (prefers-reduced-transparency:reduce){
  .c-grain{display:none}
}

main{position:relative;z-index:1;width:100%;max-width:396px}

/* --- the masthead ------------------------------------------------------------------------------ */
.mast{text-align:center;margin:0 0 26px}
.mark{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,10vw,62px);line-height:1;letter-spacing:-.012em;
  color:var(--blue);
}
/* A struck rule with an apricot lozenge at its middle -- the smallest piece of the collage, at
   the one place the eye is already resting. */
.rule{
  display:block;position:relative;width:88px;height:1px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.rule::after{
  content:"";position:absolute;left:50%;top:-3.5px;width:8px;height:8px;
  margin-left:-4px;background:var(--apricot-dk);transform:rotate(45deg);
}
.lede{
  margin:16px 0 0;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding-left:.2em;
  color:var(--muted);
}

/* --- the card ----------------------------------------------------------------------------------
   One more sheet on the board, so it carries the same shadow the torn ones do rather than the
   flat outline a form usually gets. */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:3px;                       /* nearly square: paper is cut, not rounded */
  padding:30px 28px 28px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 14px 34px -18px rgba(74,58,42,.34),
             0 2px 6px -3px rgba(74,58,42,.18);
}
/* A second sheet BEHIND the card, a degree off square and a few pixels proud of it on two sides.
   This is what makes the form part of the collage rather than a white box sitting on a picture of
   one -- the whole board is paper over paper, and a form with nothing under it is the one object
   on screen that arrived by a different route. */
.card::before{
  content:"";position:absolute;top:8px;left:8px;right:-8px;bottom:-8px;z-index:-2;
  background:#f2ebdf;border-radius:2px;
  box-shadow:0 12px 26px -20px rgba(74,58,42,.5);
}
/* And one torn apricot corner showing past the top left of both. */
.corner{
  position:absolute;top:-23px;left:-21px;width:92px;height:68px;z-index:-1;
  background:var(--apricot);transform:rotate(-7deg);
  clip-path:polygon(4% 9%,38% 2%,71% 12%,100% 5%,95% 46%,100% 93%,62% 100%,26% 91%,0 98%,6% 48%);
}
@media (max-width:640px){.corner,.card::before{display:none}}

/* --- fields ------------------------------------------------------------------------------------ */
label.field{display:block;margin:0 0 17px}
label.field > span{
  display:block;margin:0 0 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding-left:.15em;color:var(--muted);
}
input[type=email],input[type=password]{
  width:100%;font:inherit;font-size:16px;   /* 16px or iOS zooms the page on focus */
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:3px;
  padding:12px 13px;
  transition:border-color .12s ease,background .12s ease;
}
/* 4.5:1 against the field's own ground. A placeholder is exempt from the floor on paper and
   should not be: it is the only thing in an empty box, and the person who most needs to read it
   is the one who has not started typing. */
input::placeholder{color:#776859;opacity:1}
input[type=email]:hover,input[type=password]:hover{border-color:#c2ae94}
input[type=email]:focus,input[type=password]:focus{
  outline:2px solid var(--blue);outline-offset:1px;
  border-color:var(--blue);background:var(--card);
}

/* --- owner or location -------------------------------------------------------------------------
   Radios rather than a <select>, so both choices are visible without a tap and the whole form
   still works with no JavaScript at all. */
fieldset.roles{border:0;margin:0 0 22px;padding:0}
fieldset.roles legend{
  padding:0;margin:0 0 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding-left:.15em;color:var(--muted);
}
.seg{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line-2);border-radius:3px;overflow:hidden;background:var(--paper);
}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{
  display:block;text-align:center;padding:11px 8px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--muted);
  transition:background .12s ease,color .12s ease;
}
.seg label:first-of-type{border-right:1px solid var(--line-2)}
.seg label:hover{color:var(--ink);background:rgba(46,82,168,.05)}
.seg input:checked + label{background:var(--blue);color:var(--card)}
.seg input:focus-visible + label{outline:2px solid var(--blue);outline-offset:-3px}

/* --- the one filled control -------------------------------------------------------------------- */
button.go{
  width:100%;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  letter-spacing:.13em;text-transform:uppercase;padding-left:.13em;
  padding:15px 13px;border:1px solid var(--blue);border-radius:3px;
  background:var(--blue);color:var(--card);
  transition:background .12s ease,border-color .12s ease;
}
button.go:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
button.go:active{background:var(--blue-dk)}
button.go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* --- the refusal -------------------------------------------------------------------------------- */
.err{
  margin:0 0 18px;padding:11px 13px;border-radius:3px;font-size:14px;line-height:1.45;
  color:var(--err);background:#fbeee8;border:1px solid #e6c3b4;
  border-left:3px solid var(--err);
}

.foot{
  margin:22px 0 0;text-align:center;font-size:13px;color:var(--muted);
}

/* --- the application form, and the page it lands on -------------------------------------------
   Same card, same collage, same face as the sign-in page one URL over: these are the only two
   pages in this app a stranger is ever given a link to, and they are one surface. Nothing below
   introduces a colour, a radius or a rule weight the sign-in form did not already use -- the
   three-pixel radius and the paper ground are copied from the field rules above rather than
   re-chosen, because two public pages that ALMOST match read worse than two that do not. */
input[type=text],.field textarea,.field select{
  width:100%;font:inherit;font-size:16px;   /* 16px or iOS zooms the page on focus */
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:3px;
  padding:12px 13px;
  transition:border-color .12s ease,background .12s ease;
}
.field textarea{resize:vertical;line-height:1.45;display:block}
input[type=text]:hover,.field textarea:hover,.field select:hover{border-color:#c2ae94}
input[type=text]:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--blue);outline-offset:1px;
  border-color:var(--blue);background:var(--card);
}
textarea::placeholder{color:#776859;opacity:1}
.field small{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.4}
.field em{font-style:normal;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}

/* The received page: one sentence set like a statement, one paragraph under it. Display type, so
   it is held to the 3:1 large-text floor rather than 4.5:1 -- the same rule the chair page's
   themes keep, and the reason ordinary copy below it stays in ink rather than in muted. */
.said{margin:0 0 12px;font-family:var(--serif);font-size:26px;line-height:1.2;color:var(--ink)}
.body{margin:0;color:var(--ink);font-size:15px;line-height:1.6}
.foot a{color:var(--blue)}

/* --- the price chart ---------------------------------------------------------------------------
   THE ONLY WIDE THING ON EITHER PUBLIC PAGE. `main` is 396px everywhere else because everywhere
   else is one column of form; three plans side by side is a comparison, and a comparison stacked
   into a single column is a list, which is the one shape that does not answer "how do these
   differ". So the page widens and the FORM does not -- the card keeps its 396px and centres under
   the chart, because the form is still one column of form.

   Nothing below introduces a colour, a radius or a rule weight the sign-in card did not already
   use. Same three-pixel cut edge, same paper, same single blue. */
main.apply{max-width:944px}
.apply .card,.apply .foot{max-width:396px;margin-left:auto;margin-right:auto}

.chart{margin:0 0 34px}
.chart h2{
  margin:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,4.4vw,34px);line-height:1.15;color:var(--ink);
}

/* The term switch. A checkbox and a stylesheet: this page ships no JavaScript, and a price that
   appears only if a script runs is a price that sometimes does not appear. Both numbers are in the
   markup from the first byte; one of them is hidden. */
.term-box{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.term{margin:16px 0 22px;text-align:center}
.term label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  padding:7px 14px 7px 10px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--card);
  transition:color .12s ease,border-color .12s ease;
}
.term label:hover{color:var(--ink);border-color:#c2ae94}
.sw{
  width:32px;height:18px;border-radius:999px;background:var(--slate);
  position:relative;flex:none;transition:background .12s ease;
}
.sw::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--card);transition:transform .12s ease;
}
.term-box:checked ~ .term label{color:var(--ink);border-color:var(--blue)}
.term-box:checked ~ .term .sw{background:var(--blue)}
.term-box:checked ~ .term .sw::after{transform:translateX(14px)}
.term-box:focus-visible ~ .term label{outline:2px solid var(--blue);outline-offset:2px}

/* Which of the two prices is showing. The rule is stated once, here, rather than per card. */
.per-yr{display:none}
.term-box:checked ~ .rungs .per-mo{display:none}
.term-box:checked ~ .rungs .per-yr{display:block}

.rungs{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  align-items:stretch;
}

/* Each rung is another sheet on the same board -- same cut edge and same shadow as the form's
   card, so the chart reads as part of the collage rather than as a pricing table pasted over it. */
.rung{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:22px 20px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 12px 28px -18px rgba(74,58,42,.30),
             0 2px 5px -3px rgba(74,58,42,.16);
}
/* A rung that cannot be bought yet is DRAWN as not-yet: dashed edge, no lift off the page, and the
   ground one step back. The platform console says the same thing the same way (platform.css's
   `.rung.away`), and a customer reading "coming soon" in words should not have to take the word
   for it while the card looks exactly as buyable as the one beside it. */
.rung.later{background:var(--paper);border-style:dashed;border-color:var(--line-2);box-shadow:none}

.rung h3{
  margin:0;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;
  color:var(--ink);
}
.rung .pitch{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* The badge. Uppercase and small, above the name -- a plan's availability is the second thing
   somebody needs to know about it and the price is the first. */
.tag{
  display:inline-block;margin:0 0 11px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding-left:.14em;
}
.tag.now{color:var(--blue)}
.tag.soon{color:var(--muted)}

.cost{margin:16px 0 0}
.cost b{
  font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.cost .unit{font-size:13px;color:var(--muted);margin-left:3px}
/* The struck price. Muted rather than red, and set small: it is context for the live number, not
   a second number to read. */
.was{
  font-family:var(--serif);font-size:22px;color:var(--muted);
  margin-right:9px;text-decoration-thickness:1px;
}
.billed{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.rung .setup{margin:9px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* TWO CONTROLS PER CARD, ALWAYS, AND THE ROW IS THE SAME SHAPE ON EVERY RUNG. A card offering a
   demo and nothing else asks the reader to go and look at something; a card offering a demo and a
   price they can act on asks them to decide. So every rung carries a pair -- See a demo beside Buy
   now where there is something to buy, and beside Inquire where there is not -- because a row of
   cards in which one has two controls and the others have one reads as a rendering fault rather
   than as an answer.

   THE PAIR IS OUTLINE + FILL, and which is which is the whole hierarchy. The demo is the quiet one
   on every card; the act is the loud one. There is exactly one filled control per card and it is
   always the one that moves the reader forward. */
.acts{display:flex;gap:8px;margin:14px 0 0;align-items:stretch}
/* Both children are `flex:1`, and the two Buy forms are children rather than wrappers around
   one -- the term switch has no JavaScript behind it (see the chart above), so the monthly and
   annual buttons are both in the markup and `.per-yr`'s display rule hides one. A hidden flex
   child takes no space, so the row is two-across either way. */
.act{flex:1 1 0;min-width:0}
/* NOTHING HERE MAY SET `display` ON A BUY FORM, and this comment is the guard rail. The two forms
   are `.per-mo` and `.per-yr`, whose visibility is decided ~70 lines above by the term switch --
   at the same specificity as a `.buyf` rule and EARLIER in the file, so a `display:flex` here
   would win the tie on source order and show both Buy buttons at once, monthly and annual, side
   by side. The form is left at its default block, stretched by the row, and the button fills it. */
.buyf .buy{height:100%}

.demo,.buy{
  display:block;width:100%;text-align:center;box-sizing:border-box;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 8px 10px calc(8px + .11em);
  border-radius:3px;text-decoration:none;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.demo{border:1px solid var(--blue);background:var(--card);color:var(--blue)}
.demo:hover{background:var(--blue);color:var(--card)}
.demo:focus-visible,.buy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Visibly not available and still visibly a button -- a control that vanishes when it cannot be
   used is a control somebody looks for. The label stays in muted, which measures 5.3:1 here. */
.demo:disabled{
  border-color:var(--line-2);border-style:dashed;color:var(--muted);
  background:transparent;cursor:default;
}
.demo:disabled:hover{background:transparent;color:var(--muted)}

/* The act. Filled, and it is the same object whether it says Buy now or Inquire -- past the
   month's self-serve quota, or on a deployment with no payment processor at all, there is still a
   way to get this product and it just goes through a person. A greyed-out Buy is a shop that looks
   shut; a card that says Inquire is a card that is still selling something. */
.buy{border:1px solid var(--blue);background:var(--blue);color:var(--card)}
.buy:hover{background:var(--ink);border-color:var(--ink)}

/* Under about 340px of card the two labels stop fitting side by side, and a pair of buttons with
   one word wrapped mid-row looks broken. They stack instead, keeping the same order. */
@media (max-width:400px){
  .acts{flex-direction:column}
}

/* The feature list. Rules between the lines rather than bullets -- the same hairline the masthead
   uses, which is what keeps a list of six things from reading like a receipt. */
.feats{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.feats li{
  padding:9px 0 9px 19px;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.45;color:var(--ink);position:relative;
}
.feats li::before{
  content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  background:var(--apricot-dk);transform:rotate(45deg);
}
.rung.later .feats li::before{background:var(--slate)}

/* --- the address field on the setup page ---------------------------------------------------
   ONE BOX THAT READS AS ONE ADDRESS. The console URL is a fixed left-hand side and a piece the
   customer chooses, and showing the fixed part as a placeholder inside the input -- or as a
   sentence underneath -- both fail the same way: people type the whole URL in, because nothing
   told them where their part starts. So the prefix sits inside the frame, unselectable, and the
   input carries only what is theirs. */
.pre-in{
  display:flex;align-items:stretch;
  border:1px solid var(--line-2);border-radius:3px;background:var(--card);
  overflow:hidden;
}
.pre-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,105,150,.14)}
.pre{
  flex:none;display:flex;align-items:center;padding:0 2px 0 11px;
  font-size:14px;color:var(--muted);white-space:nowrap;
  user-select:none;-webkit-user-select:none;
}
.pre-in input{
  flex:1 1 0;min-width:0;border:0;border-radius:0;background:transparent;
  padding-left:0;
}
.pre-in input:focus{outline:none;box-shadow:none;border-color:transparent}
@media (max-width:420px){
  /* The prefix is the first thing to go when there is no room: it is context, and the field is
     the answer. Wrapping it above keeps both readable instead of squeezing the input to nothing. */
  .pre-in{flex-direction:column;align-items:stretch}
  .pre{padding:9px 11px 0}
  .pre-in input{padding-left:11px}
}

.chart-note{
  margin:20px auto 0;max-width:44em;text-align:center;
  font-size:13px;line-height:1.55;color:var(--muted);
}

/* --- the demo page -----------------------------------------------------------------------------
   One sheet, holding the real chair page. Narrow on purpose: the thing inside is a page drawn for
   a phone held in a chair, and showing it in a 900px box would be showing a layout nobody ever
   sees.

   IT IS SIZED FROM THE HEIGHT, WHICH IS THE WHOLE FIX HERE. This was `width:100%` on a 390/800
   box inside a 430px column, which is 882px of phone -- taller than the laptop it was being read
   on, so the demo arrived already cut off at the bottom and the page under it had to be scrolled
   past to find the way back. A phone on a desk is a thing you see ALL OF; one that runs off the
   bottom of the screen reads as a broken embed. So the height is what is bounded, and the width
   follows from it. */
main.demo-page{max-width:430px}
.demo-page .mark a{color:inherit;text-decoration:none}
.demo-page .mark a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* THE MASTHEAD GIVES UP HALF ITS HEIGHT ON THIS PAGE, and it is the cheapest 70px available. On
   every other public page the wordmark IS the page's opening -- there is a form under it and
   nothing else competing. Here the subject is a phone, and 62px of company name above it is 62px
   the phone does not get. Every other page keeps the big one. */
.demo-page .mark{font-size:clamp(30px,6vw,36px)}
.demo-page .rule{margin-top:14px}
.demo-page .lede{margin-top:12px}
.demo-page .mast{margin-bottom:18px}

.frame{
  /* THE HEIGHT IS WHAT IS BOUNDED AND THE WIDTH FOLLOWS FROM IT -- see the note above. 260px is
     what the rest of this page needs: 80 of body padding, ~110 of masthead, and a line each of
     caption and footer with their margins. Measured against the page rather than guessed, because
     a guess that is 120px short is a demo that still runs off the bottom of the screen, which is
     the complaint this whole block exists to answer.

     `svh` AND NOT `vh`. On a phone `vh` is the viewport height with the browser's own chrome
     RETRACTED, so a vh-sized box is one that is too tall until you scroll -- the exact failure
     being removed here, reintroduced by the unit. */
  --fh:clamp(430px, calc(100svh - 260px), 720px);
  height:var(--fh);
  /* The handset proportion, as a width rather than an aspect-ratio, because the height above is
     already definite. It is FLOORED AT 300px and the ratio is allowed to drift below that: on a
     short viewport a strict 390/800 box would be 230px wide, and the chair page laid out at 230px
     is not a preview of anything anybody's phone shows. A slightly wide device still reads as a
     device; a 230px one reads as a broken embed. `min(100%,...)` keeps it inside a narrow column. */
  width:min(100%, max(300px, calc(var(--fh) * 390 / 800)));
  position:relative;margin:0 auto;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 18px 40px -20px rgba(74,58,42,.42),
             0 2px 6px -3px rgba(74,58,42,.18);
}
/* The page inside simply fills the box -- no scaling. An iframe lays out at the width it is
   given, so shrinking a 390px render down would show a layout at a size nobody's phone is, and
   stretching a narrow one up would blur it.

   POINTER-EVENTS IS GONE FROM HERE, and its absence is the feature. The frame used to be inert
   so that a tap could not put a drink on somebody's bar queue; that is now handled where it
   belongs -- the chair page answers the order itself when it is running as the demo, so no
   request is made at all -- and the visitor gets to walk the page instead of looking at it. */
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame-note{
  margin:14px 0 0;text-align:center;font-size:13px;line-height:1.55;color:var(--muted);
}
.demo-page .foot{margin-top:14px}

/* On a phone the three cards are a stack, which loses the comparison the layout was for -- so the
   cards give up their padding rather than their content, and the whole thing stays scrollable in
   one column. Nothing is hidden: a plan the reader cannot see is a plan they did not consider. */
@media (max-width:640px){
  .rung{padding:18px 16px 16px}
  .cost b{font-size:34px}
  .rung h3{font-size:21px}
}