/* =========================================================================
   polish.css — the professional pass.

   Loaded after style.css and before owner.css, and it only refines: white
   stays the primary surface, near-black stays the text, and violet/pink stay
   the accent. What changes is discipline.

   The brief, in four rules:

     1. One accent moment per screen, not six. The gradient is the loudest
        thing this palette can do, so it earns its place on the headline and
        the shutter and is taken off everything else. A primary button in
        solid ink next to a gradient headline reads as considered; the same
        button in gradient, beside a gradient headline, beside a gradient
        tick, reads as a template.
     2. Nothing moves unless it is telling you something. The headline's
        gradient used to slide back and forth forever, and a card lifted five
        pixels on hover. Both are now still or nearly so.
     3. Quieter background. The three colour blobs were doing the work of a
        hero image behind text that needs contrast, not competition.
     4. Tighter geometry. Slightly smaller radii, tighter heading tracking,
        hairline borders, softer and further-thrown shadows.

   Every rule is additive and this file can be deleted to get the old look
   back, which is the reason it is a separate file at all.
   ========================================================================= */

:root{
  /* Crisper corners. The originals were rounded enough to read as playful;
     a few pixels tighter reads as designed without becoming severe. */
  --r-sm:8px; --r:11px; --r-lg:16px; --r-xl:22px;

  /* Shadows thrown further and softer: the giveaway of a cheap-looking page
     is a tight dark shadow close to the element. */
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 6px 20px -8px rgba(16,24,40,.12),0 1px 3px rgba(16,24,40,.04);
  --sh-3:0 32px 70px -28px rgba(16,24,40,.26),0 2px 8px rgba(16,24,40,.04);

  --ring:0 0 0 3px rgba(91,75,255,.18);
  --line:#e8eaf1;
  --line-2:#f2f4f8;
}

/* ------------------------------------------------------- background ----- */

/* Turned right down. These were competing with the text for attention and
   winning; at this strength they do what they were for — stopping the page
   from being a flat white rectangle — and nothing else. */
.bg-fx .blob{filter:blur(130px);opacity:.26}
.bg-fx .b1{width:42vw;height:42vw}
.bg-fx .b2{width:34vw;height:34vw;opacity:.2}
.bg-fx .b3{opacity:.14}
.bg-fx .grain{opacity:.014}
.bg-fx .scan{opacity:.32}

/* Drifting blobs are a background, not an animation. Slowing them by a factor
   of three puts the movement below the threshold where you notice it and
   leaves only the impression that the page is alive. */
.bg-fx .b1{animation-duration:78s}
.bg-fx .b2{animation-duration:92s}
.bg-fx .b3{animation-duration:86s}

@media (prefers-reduced-motion:reduce){
  .bg-fx .blob{animation:none}
}

/* ----------------------------------------------------------- top bar --- */

.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.ghost-btn{
  font-weight:580;
  font-size:13px;
  letter-spacing:-.005em;
  border-radius:9px;
}
.ghost-btn:hover{background:var(--surface-2)}
.ghost-btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* --------------------------------------------------------------- type --- */

/* Large type wants tighter tracking than small type; the original used one
   value for both, which left the headline looking loose and the body cramped. */
.title{
  font-size:clamp(38px,6.2vw,72px);
  letter-spacing:-.045em;
  line-height:1.03;
  font-weight:780;
  margin:22px 0 20px;
}
/* Still, not sliding. An animated gradient on a headline is the single most
   template-looking thing on the page. */
.title .grad{
  background-size:100% 100%;
  animation:none;
}
.lede{
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.62;
  max-width:46ch;
  color:var(--ink-2);
}
.h2{letter-spacing:-.03em;font-weight:720}
.sub{font-size:14px;line-height:1.6}

/* Micro-caps for the little label above the headline: the least amount of
   visual weight that still reads as a label rather than as a sentence. */
.eyebrow{
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:640;
  color:var(--ink-3);
  padding:6px 12px;
  box-shadow:none;
  background:var(--surface);
}
.eyebrow .live-dot{width:6px;height:6px}

.chips li{
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--ink-3);
  padding:5px 11px;
  background:transparent;
  border-color:var(--line);
}

/* ------------------------------------------------------------ buttons --- */

.btn{
  font-weight:620;
  letter-spacing:-.005em;
  border-radius:999px;
  transition:.18s var(--ease);
}
.btn:hover{transform:none;background:var(--surface-2);border-color:#d5dae5;box-shadow:var(--sh-1)}
.btn:active{transform:scale(.99)}

/* Solid ink, not gradient. The gradient is spent on the headline and the
   shutter; spending it again here is what makes a page look like a theme. */
.btn.primary{
  background:var(--ink);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(16,24,40,.55);
}
.btn.primary:hover{
  background:var(--violet);
  filter:none;
  box-shadow:0 10px 26px -10px rgba(91,75,255,.5);
}
.btn.primary:active{background:var(--violet)}
.btn.ghost{border-color:var(--line)}
.btn.lg{padding:13px 24px;font-size:15px}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}

.mini-btn{border-radius:8px;font-weight:580}
.mini-btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* The shutter keeps the gradient. It is the one control the whole booth is
   built around, and it is the only place on that screen using it. */
.shutter-core{box-shadow:0 10px 26px -12px rgba(91,75,255,.7)}
.shutter:hover .shutter-ring{inset:-4px}

/* -------------------------------------------------------------- cards --- */

.how-card{
  padding:24px;
  box-shadow:none;
  background:var(--surface);
  transition:.22s var(--ease);
}
.how-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line)}
.how-card .n{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ink-3);
  font-weight:700;
}
.how-card h3{margin:12px 0 8px;font-size:17.5px;letter-spacing:-.02em}
.how-card p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

.design-card{transition:.22s var(--ease)}
.design-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#dfe3ec}
/* Selected reads as ink + a gradient tick, rather than a violet glow round
   the whole card. One accent, in one place. */
.design-card.sel{
  border-color:var(--ink);
  box-shadow:var(--sh-2);
}
.design-card .dc-name{font-size:14px;font-weight:640;letter-spacing:-.01em}
.design-card .dc-meta{font-size:11.5px}
.design-card .tick{
  width:22px;height:22px;top:14px;right:14px;
  box-shadow:0 3px 10px -3px rgba(91,75,255,.6);
}

.panel{box-shadow:var(--sh-1)}
.panel-head h3{font-size:13px;letter-spacing:.01em}

/* ------------------------------------------------------------- inputs --- */

.input{
  border-radius:10px;
  transition:.16s var(--ease);
}
.input:focus{outline:none;border-color:var(--violet);box-shadow:var(--ring)}
.input::placeholder{color:var(--ink-3)}

.seg{border-radius:999px}
.seg button{font-weight:580;letter-spacing:-.005em}
.seg button.on{font-weight:660}

/* ------------------------------------------------------------- layout --- */

.view-head{margin-bottom:22px}
.hero{min-height:min(70vh,660px)}
.hero-glow{opacity:.13;filter:blur(110px)}

.sticky-cta{
  border-color:var(--line);
  box-shadow:0 -6px 24px -12px rgba(16,24,40,.16);
}
.picked{font-size:13.5px}

.modal-card{box-shadow:var(--sh-3);border-radius:var(--r-xl)}
.badge{font-size:11px;letter-spacing:.05em;padding:5px 10px}

/* Links get the accent, and only links. */
a{text-underline-offset:2px}
a:hover{text-decoration:underline}

/* A keyboard user should always be able to see where they are. The original
   only styled :focus-visible on .btn. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:8px;
}

::selection{background:rgba(91,75,255,.14)}

/* -------------------------------------------------------------- phone --- */

@media (max-width:640px){
  .title{font-size:clamp(32px,10vw,44px);letter-spacing:-.035em}
  .lede{font-size:15px}
  .how-card{padding:20px}
  /* The bottom bar needs somewhere to sit that is not on top of the primary
     action of the page. */
  .sticky-cta{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* The owner bar sits at the bottom of the screen, so anything else that lives
   there is lifted clear of it rather than being covered by it. */
body.is-owner .sticky-cta{margin-bottom:64px}