/* ==========================================================================
   Indore — sign in
   One door, four faces. The face is chosen by ?state= (cold | gift | ride |
   checkout) and cold is the default. Two pages wear it: signup.html, all four
   faces, and signin.html, cold and checkout only, with the pitch taken off
   (see "The sign-in page" below).

   Loads AFTER css/base.css, which carries the faces, the tokens, the reset,
   .wrap, .cap, .opill, .nav, the focus ring, the white .panel card and the
   reduced-motion block. What is left here is the door itself: the four
   faces, the photograph and its veils, the two auth buttons and the slim
   small-print bar that stands in for the site footer on this page.
   ========================================================================== */

/* The door sits on the photograph's own near-black rather than the site's
   white ground. */
body{background:var(--ink)}

/* ==========================================================================
   The four faces
   Everything that changes between cold / gift / ride / checkout carries .f and
   the class of its own face. Hidden faces are display:none, so a screen reader
   never meets them. display:revert puts each element back to its own default —
   inline for a <span>, block for a <section>.
   ========================================================================== */
.f{display:none}
[data-state="cold"] .f--cold,
[data-state="gift"] .f--gift,
[data-state="ride"] .f--ride,
[data-state="checkout"] .f--checkout{display:revert}

/* ==========================================================================
   The door
   The homepage hero's shape, quietened: one full-bleed photograph, the offer
   set large in Clash Display, the composition left-aligned and sitting on the
   bottom of the frame. The photograph's left third is motion blur, so the
   column has somewhere dark to stand.
   ========================================================================== */
/* ---------- the address bar ----------
   100svh is the height of the screen WITH the browser's address bar showing.
   Sizing the door to it means that the moment the bar slides away the screen
   is taller than the door and a band of flat ink opens below the photograph,
   appearing and vanishing as the bar comes and goes.
   So the door is sized to the LARGE viewport — the tallest the screen ever
   gets — and the photograph covers it in both states. The column inside is
   then held to the SMALL viewport and bottom-aligned within it, so the two
   buttons and the small print always come to rest above the bar rather than
   behind it, and the leftover strip below is photograph.
   Holding the column rather than padding it means this costs nothing when the
   content is taller than a screen: the column grows, the door grows with it,
   and there is no trailing empty space.
   lvh and svh are both static — neither changes during a scroll — so the pair
   resolves once at layout and never animates. That is the whole point. The
   first declaration of each pair is the fallback for a browser with neither
   unit, and the review bar's allowance rides along in all of them. */
.door{position:relative;background:var(--ink);
  min-height:calc(100vh - var(--review-h,0px));
  min-height:calc(100lvh - var(--review-h,0px));
  overflow:hidden;display:flex;flex-direction:column}

/* Each face brings its own photograph. The three that are not on show are
   display:none and their <img> carries loading="lazy", so the browser defers
   a fetch it will never make — one face, one photograph, one download. */
.door__pic{display:none}
[data-state="cold"] .door__pic--cold,
[data-state="gift"] .door__pic--gift,
[data-state="ride"] .door__pic--ride,
[data-state="checkout"] .door__pic--checkout{display:contents}

/* The crop is a variable so each face can point the frame at its own quiet
   corner, and so the wide breakpoint can re-aim all four in one place. */
.door__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:var(--crop,50% 40%)}
[data-state="cold"]{--crop:70% 38%}
[data-state="gift"]{--crop:78% 36%}
[data-state="ride"]{--crop:52% 50%}
[data-state="checkout"]{--crop:46% 50%}

.door__scrim{position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 20%,rgba(0,0,0,.74) 56%,rgba(0,0,0,.94) 100%)}

.door__in{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(100vh - var(--review-h,0px));
  min-height:calc(100svh - var(--review-h,0px));
  padding:100px 0 30px}
/* .wrap carries margin-inline:auto, and a flex item with an auto cross-axis
   margin is never stretched — without an explicit width the whole column
   would shrink to its content and centre itself. */
.door__wrap{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:26px}

.door__head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:660px}
.door__eyebrow{align-self:flex-start}
.door__title{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;line-height:1.04;
  color:var(--white);font-size:clamp(34px,7vw,62px)}
.door__sub{font-size:18px;line-height:1.35;color:rgba(255,255,255,.82);max-width:560px}

.door__body{display:flex;flex-direction:column;align-items:stretch;gap:28px;width:100%}
.door__what,.door__auth{width:100%;min-width:0}

/* ---------- cold has no card ----------
   The other three faces put a white panel next to the buttons. Cold says the
   same four facts in its paragraph, so the panel goes — and with it the slot
   it sat in, rather than leaving an empty one. What is left is re-set as a
   single left column with the headline carrying more of the weight. */
[data-state="cold"] .door__what{display:none}

/* ---------- where you are going next ---------- */
.next{display:flex;flex-direction:column;gap:10px;max-width:420px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.next__label{color:rgba(255,255,255,.5)}
.next__text{font-size:17px;line-height:1.35;color:var(--white)}

/* ---------- the two doors ----------
   The homepage's white capsule, stretched: same pill, same shadow, same Clash
   Display label. Google first because it is the one that is built; both are
   given the same weight because Apple will be too. */
.auth{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;margin-top:22px}
.authbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:56px;padding:0 24px;border:0;border-radius:999px;
  /* .btn--light from the homepage, stretched: white ground, --primary label */
  background:var(--white);color:var(--primary);box-shadow:var(--lift-sm);cursor:pointer;
  font-family:var(--disp);font-weight:700;font-size:18px;line-height:1;
  transition:background-color 150ms linear}
.authbtn:hover{background:rgba(255,255,255,.86)}
.authbtn:active{background:rgba(255,255,255,.76)}
.authbtn__mark{width:20px;height:20px;flex:0 0 auto}
.authbtn__mark--apple{color:var(--ink);margin-top:-3px}

.fine{margin-top:18px;max-width:420px;font-size:16px;line-height:1.35;color:rgba(255,255,255,.62)}
.fine--legal{margin-top:10px}
/* inline links inside a sentence cannot be 44px tall without wrecking the
   line, so the padding buys back what it can without moving anything */
.fine a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.fine a:hover{color:var(--white)}

/* ---------- slim small print bar ----------
   The homepage's footer is a 468px four-column block. On a door somebody is
   trying to walk through it would be furniture, so only its small print
   survives, on one line at the bottom of the frame. */
.dfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;
  width:100%;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.dfoot__logo{height:15px;width:auto}
.dfoot__links{display:flex;align-items:center;gap:22px}
.dfoot__links a{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;color:rgba(255,255,255,.6)}
.dfoot__links a:hover{color:var(--white)}

/* ---------- narrow frames ----------
   A portrait frame only gets the top-to-bottom veil, and its lightest point
   lands at about a fifth of the way down — which is exactly where the headline
   and the paragraph sit. Three of the four pictures put something mid-tone
   there: gift's orange top, checkout's calf, ride's bare concrete wall. Each
   gets more weight in that band rather than a flat dimming of the whole frame.
   Cold is dark enough on its own and is left alone. */
@media (max-width:899px){
  [data-state="gift"] .door__scrim,
  [data-state="checkout"] .door__scrim{
    background:linear-gradient(rgba(0,0,0,.56) 0%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.8) 56%,rgba(0,0,0,.94) 100%)}
}
@media (max-width:899px){
  [data-state="ride"] .door__scrim{
    background:
      linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,.44) 100%),
      linear-gradient(rgba(0,0,0,.5) 0%,rgba(0,0,0,.46) 18%,rgba(0,0,0,.58) 36%,rgba(0,0,0,.8) 60%,rgba(0,0,0,.94) 100%)}
}
/* ---------- 600px and up ---------- */
@media (min-width:600px){
  .door__sub{font-size:19px}
}

/* ---------- 900px and up ----------
   The photograph is a square, so on a landscape frame nothing is cropped off
   its sides — the blurred left edge stays where the type needs it. A second,
   horizontal veil is laid over it so the column sits on near-black while the
   rider keeps his own light. */
@media (min-width:900px){
  /* Landscape shows the square whole across, so only the vertical aim is
     left to set. Cold and gift sit high, on the rider's back and shoulders;
     ride sits high too, because that is the only band where all three riders
     are in the frame at once; checkout drops low enough to reach the crank
     without bringing the white shoe up behind the white panel. */
  [data-state="cold"]{--crop:50% 34%}
  [data-state="gift"]{--crop:50% 30%}
  [data-state="ride"]{--crop:50% 30%}
  [data-state="checkout"]{--crop:50% 52%}
  .door__scrim{
    background:
      linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 32%,rgba(0,0,0,.4) 58%,rgba(0,0,0,0) 84%),
      linear-gradient(rgba(0,0,0,.52) 0%,rgba(0,0,0,.24) 26%,rgba(0,0,0,.5) 100%)}
  /* Ride is the one bright frame of the four — bare concrete behind three
     riders. Rather than dim the whole picture, the veil holds its weight
     further across, so the type keeps a dark ground and the riders on the
     right keep their light. */
  [data-state="ride"] .door__scrim{
    background:
      linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.9) 40%,rgba(0,0,0,.66) 58%,rgba(0,0,0,.14) 84%,rgba(0,0,0,0) 100%),
      linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,.28) 26%,rgba(0,0,0,.6) 100%)}
  .door__in{padding:120px 0 40px}
  .door__wrap{gap:32px}
  .authbtn{min-height:58px;font-size:19px}
}

/* ---------- 1000px and up ----------
   Panel and doors sit side by side rather than in one tall column: it keeps the
   whole page inside one screen and holds the block against the bottom-left
   corner the way the homepage hero does. */
@media (min-width:1000px){
  .door__body{display:grid;grid-template-columns:minmax(0,360px) minmax(0,400px);
    gap:56px;align-items:end;width:auto}
  .door__what{align-self:end}
  .panel{max-width:none}
  .auth{margin-top:20px}
  .door__title{line-height:1}
  .door__sub{font-size:20px}
}

/* ---------- cold, from 1000px up ----------
   No panel means no second column: the block collapses to one, the headline
   takes the size the panel used to take up, and the photograph keeps the
   right of the frame to itself. */
@media (min-width:1000px){
  [data-state="cold"] .door__body{display:flex;flex-direction:column;align-items:flex-start;width:100%}
  [data-state="cold"] .door__head{max-width:860px}
  [data-state="cold"] .door__title{font-size:clamp(54px,5.9vw,82px)}
  [data-state="cold"] .door__sub{max-width:660px;font-size:21px}
}

/* ---------- 1440px and up ---------- */
@media (min-width:1440px){
  .door__head{max-width:760px}
  .door__body{grid-template-columns:minmax(0,400px) minmax(0,420px);gap:64px}
}

/* ---------- short landscape frames ----------
   A 900-tall laptop is the common case and the longest face (gift) overruns it
   by a few pixels, so the rhythm tightens before the type does. Below 820 the
   heading gives up size as well rather than pushing the small print off. */
@media (min-width:900px) and (max-height:960px){
  .door__in{padding:100px 0 32px}
  .door__wrap{gap:24px}
  .door__head{gap:14px}
  .dfoot{margin-top:10px;padding-top:12px}
}
@media (min-width:900px) and (max-height:820px){
  .door__title{font-size:clamp(30px,3.4vw,48px)}
  [data-state="cold"] .door__title{font-size:clamp(34px,4.4vw,60px)}
  .door__in{padding-top:92px}
  .door__wrap{gap:20px}
}

/* ==========================================================================
   The sign-in page
   signin.html is this door without the pitch (signup.html keeps it), marked
   .door--signin. Its cold face is the heading and the buttons: the empty
   eyebrow pill and paragraph go, and so does the heads-up, unless
   js/signin.js has put data-desktop on <html> and written the HUD's line in.
   ========================================================================== */
[data-state="cold"] .door--signin .door__eyebrow,
[data-state="cold"] .door--signin .door__sub{display:none}
:root:not([data-desktop])[data-state="cold"] .door--signin .door__auth > .next{display:none}
/* With no heads-up above them, the buttons need no gap to clear it. */
:root:not([data-desktop])[data-state="cold"] .door--signin .auth{margin-top:0}

/* ==========================================================================
   Live
   js/signin.js runs the page when the head script has put data-live on
   <html>. None of this touches the mockup: every rule below needs data-live,
   data-buy, or an element only live mode un-hides.
   ========================================================================== */
/* The hidden attribute has to beat .auth and .next, which set display. */
.door [hidden]{display:none}

/* Mockup lines that would be untrue live, and live lines the mockup does not
   have. :root raises these above the face rules they sit next to. */
:root[data-live] .mock-only{display:none}
:root:not([data-live]) .live-only{display:none}

/* The checkout face is the pack's unless the Buy was for the plan or the pass. */
:root:not([data-buy="plan"]) .buy-plan{display:none}
:root:not([data-buy="pass"]) .buy-pass{display:none}
:root[data-buy="plan"] .buy-pack,
:root[data-buy="pass"] .buy-pack{display:none}

/* The quiet line under the buttons when something did not work. */
.fine--msg{color:var(--white)}

/* "Never mind": a plain word, sized like the links beside it. */
.fine__btn{padding:8px 0;border:0;background:none;cursor:pointer;
  font:inherit;color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px}
.fine__btn:hover{color:var(--white)}

.authbtn:disabled{cursor:default;opacity:.7}

/* ======================================================================
   REVIEW SWITCHER — START
   Review furniture only. Not part of the page. Delete from here to the end
   of the file, plus the matching block in signin.html, and nothing else
   changes: --review-h falls back to 0 and the door reclaims the space.
   ====================================================================== */
:root{--review-h:52px}
body{padding-top:var(--review-h)}
.rvw{position:fixed;left:0;right:0;top:0;z-index:90;height:var(--review-h);
  display:flex;align-items:center;gap:12px;padding:0 12px;
  background:#101018;border-bottom:1px solid rgba(255,255,255,.22);
  font-family:var(--body);color:rgba(255,255,255,.55)}
.rvw__tag{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap}
.rvw__btns{display:flex;gap:6px;margin-left:auto}
.rvw__b{height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:transparent;color:rgba(255,255,255,.7);cursor:pointer;
  font-family:var(--body);font-size:13px;line-height:1}
.rvw__b:hover{color:var(--white);border-color:rgba(255,255,255,.45)}
.rvw__b[aria-pressed="true"]{background:var(--white);color:#101018;border-color:var(--white)}
@media (min-width:600px){.rvw{padding:0 20px}.rvw__btns{margin-left:16px}}
/* Live, the switcher is not there: it would put the mockup's invented faces
   in front of a real visitor. */
html[data-live] .rvw{display:none}
html[data-live]{--review-h:0px}
/* REVIEW SWITCHER — END */