/* ============================================================================
   Remove Watermark (remove-watermark.html), liquid glass.

   The recipe lives in glass.css, which must be loaded before this. This file
   only decides which surfaces become glass and how the width is used.

   Dark only, like the rest of the site: every page ships <html data-theme="dark">,
   so a light set of values would be unreachable code that reads like a supported
   mode. glass.css says the same thing and means it.

   The page is standalone on BOTH hosts. On tanix.app it opts out of the app frame
   (app-shell.js), because it is public and must not meet a sign-in wall, so there
   is no app container to inherit. The width below is therefore the page's own.

   WIDTH. It used to stop at 720px, which on a laptop left two thirds of the screen
   empty while the search sat in a strip down the middle. Stretching the search box
   to 1500px would have been worse: a very wide text input is not a nicer one. So
   above 1100px it becomes two columns, the same answer connect-ai-glass.css gives:
   the search keeps a comfortable measure on the left, "How it works" moves beside
   it instead of being buried under the fold. The width gets used, nothing is
   stretched.

   glass.css falls back to var(--surface) and borrows var(--accent) where a page
   has them. This page does not load styles.css, so the few it needs are defined
   here rather than pulling in the whole site sheet for three colours.
   ========================================================================= */

.rw {
  /* Fallbacks glass.css expects from the site sheet. */
  --surface: #0b1327;
  --accent: #38bdf8;
  --accent-2: #7dd3fc;

  --rw-text: #eaf0fb;
  --rw-muted: #9aabc6;
  --rw-dim: #6c7d99;
  --rw-gold: #f6c851;
  --rw-gold-2: #e0a93a;
  --rw-good: #34d399;
  --rw-save: #f6c851;   /* was lime; one accent family reads tidier on a gold page */
  --rw-bad: #fb7185;
  --rw-max: 960px;

  box-sizing: border-box;
  display: block;
  padding: clamp(14px, 2vw, 26px) clamp(16px, 3vw, 32px) 56px;
  color: var(--rw-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.55;
}
.rw *, .rw *::before, .rw *::after { box-sizing: border-box; }
body { background: #060a14; }

.rw-wrap { max-width: var(--rw-max); margin: 0 auto; }
.rw-boot { color: var(--rw-muted); text-align: center; padding: 48px 0; }

/* ---------- 0. Back and Home (desktop app only) --------------------------
   Drawn only inside the desktop window, which has no browser chrome. Shaped like .as-back in
   app-shell.css so the pair matches every other page, but written here rather than borrowed:
   app-shell.css is injected by nginx on the app host and absent on tanimawoai.com, and a button
   that silently loses its styling on one of its two homes is worse than a few lines of CSS. */
/* Bottom left (founder 2026-10-31), separated by a rule so the pair does not read as part of the
   Stripe line above it. flex-start rather than centred: everything else on this page is centred, so
   the one thing that is navigation rather than content sits apart from that column on purpose. */
.rw-nav { display: flex; justify-content: flex-start; gap: 8px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--g-edge); }
.rw-nav-b {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px 0 10px; border-radius: 10px; cursor: pointer;
  font: 600 .86rem 'Inter', system-ui, sans-serif; color: var(--rw-text);
  background: var(--g-sheen), var(--g-fill-2);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim);
  transition: background .15s ease, border-color .15s ease;
}
.rw-nav-b svg { width: 17px; height: 17px; }
.rw-nav-b:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--g-edge)); background: var(--g-sheen), rgba(56, 189, 248, .1); }
.rw-nav-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- 1. Header ---------------------------------------------------- */
.rw-head { text-align: center; margin-bottom: clamp(26px, 4vw, 40px); }
.rw-head h1 {
  margin: 0 0 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 4.2vw, 2.85rem); line-height: 1.1; letter-spacing: -.015em;
}
.rw-sub {
  margin: 0 auto; max-width: 80ch; color: var(--rw-muted);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
}
.rw-sub strong { color: var(--rw-text); font-weight: 600; }

/* ONE LINE EACH (founder 2026-10-31). Measured before changing anything: both already sat on one
   line on a wide screen, but the subtitle broke to two below about 900px and the headline broke
   below 600px, so the page read differently depending on the window.

   Held on one line by letting the type scale with the viewport instead of wrapping, and the 80ch
   cap on the subtitle is lifted here because it, not the container, was what forced the break.

   It stops at 700px ON PURPOSE. Keeping the headline on one line at 360px needs about 16px type,
   which is smaller than the body text under it and reads as a mistake rather than a headline. Below
   700px they wrap, which is the right answer on a phone. */
@media (min-width: 700px) {
  .rw-head h1 { white-space: nowrap; font-size: min(2.85rem, 4.6vw); }
  .rw-sub { white-space: nowrap; max-width: none; font-size: min(1.08rem, 1.85vw); }
}

/* ---------- 3. The price, as a pane -------------------------------------- */
.rw-price {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 12px;
  margin-top: 22px; padding: 14px 26px; border-radius: 18px;
  background: var(--g-grain), var(--g-sheen), var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur-s); backdrop-filter: var(--g-blur-s);
  border: 1px solid color-mix(in srgb, var(--rw-gold) 30%, var(--g-edge));
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim-lo), var(--g-cast);
}
.rw-price-amt {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1.1; color: var(--rw-gold);
  background: linear-gradient(135deg, #fde68a, var(--rw-gold), var(--rw-gold-2));
  -webkit-background-clip: text; background-clip: text;
}
/* Without the guard a browser with no background-clip paints transparent text on a
   dark pane and the price simply vanishes. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rw-price-amt { -webkit-text-fill-color: transparent; }
}
.rw-price-per { color: var(--rw-muted); font-size: .9rem; }
.rw-price-was { color: var(--rw-dim); font-size: 1.1rem; font-weight: 600; text-decoration-thickness: 2px; }
.rw-off {
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: .1em;
  color: #2a1d02; background: linear-gradient(135deg, #ffd98a, #f0b429);
  box-shadow: 0 6px 16px -8px rgba(240, 180, 41, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* Block level flex, not inline: as an inline box it flowed up beside the price pane and the
   pair centred together, which left the price looking knocked off centre. */
.rw-ends {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 0 0; font-size: .9rem; font-weight: 600; color: var(--rw-save);
}
.rw-ends::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rw-save);
  box-shadow: 0 0 0 0 rgba(246, 200, 81, .6); animation: rw-pip 2.4s ease-out infinite;
}
@keyframes rw-pip { 70% { box-shadow: 0 0 0 8px rgba(246, 200, 81, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 200, 81, 0); } }
.rw-closed {
  margin: 18px auto 0; max-width: 54ch; padding: 12px 18px; border-radius: 13px;
  font-size: .91rem; color: #fcd9a6;
  background: var(--g-sheen), rgba(246, 200, 81, .07);
  border: 1px solid rgba(246, 200, 81, .22);
}

/* ---------- 4. Search panel ---------------------------------------------- */
.rw-panel {
  padding: clamp(20px, 2.6vw, 30px); border-radius: 22px;
  background: var(--g-grain), var(--g-sheen), var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim-lo), var(--g-cast);
}
.rw-label { display: block; margin-bottom: 11px; font-weight: 600; font-size: 1.06rem; }
.rw-bar { display: flex; }
.rw-input {
  width: 100%; padding: 15px 17px; border-radius: 14px;
  font: inherit; font-size: 1.04rem; color: var(--rw-text); outline: none;
  background: color-mix(in srgb, var(--g-fill) 72%, transparent);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.rw-input::placeholder { color: var(--rw-dim); }
.rw-input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--g-edge));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28), 0 0 0 3px rgba(56, 189, 248, .16);
}
/* The browser's own clear button on a search field is a blue cross that belongs to no theme.
   Replaced with a muted one drawn in the page's own colours. */
.rw-input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; cursor: pointer; opacity: .5;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rw-input::-webkit-search-cancel-button:hover { opacity: .9; }
.rw-hint { margin: 11px 2px 0; color: var(--rw-dim); font-size: .85rem; }
.rw-out { margin-top: 20px; }
.rw-out:empty { margin-top: 0; }
.rw-note { margin: 0; padding: 16px 0; color: var(--rw-muted); font-size: .94rem; text-align: center; }

/* ---------- 5. Search results -------------------------------------------- */
.rw-hits { display: flex; flex-direction: column; gap: 12px; }
.rw-hit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px; padding: 16px 18px; border-radius: 16px;
  background: var(--g-sheen), var(--g-fill-2);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim);
  transition: border-color .16s ease;
}
.rw-hit:hover { border-color: color-mix(in srgb, var(--accent) 24%, var(--g-edge)); }
.rw-hit.is-off { opacity: .66; }
.rw-hinfo { flex: 1 1 200px; min-width: 0; }
.rw-htitle { margin: 0 0 3px; font-size: 1.06rem; font-weight: 600; overflow-wrap: anywhere; }
.rw-hurl { color: var(--accent-2); font-size: .89rem; text-decoration: none; overflow-wrap: anywhere; }
.rw-hurl:hover { text-decoration: underline; }
.rw-hnote { display: block; margin-top: 4px; color: #fcd9a6; font-size: .81rem; }
.rw-hact { flex: 0 0 auto; }
/* A tick drawn from two borders rather than typed. The ✓ character is absent from some font
   stacks and falls back to a hollow box, which reads as a broken page rather than a success. */
.rw-tick::before {
  content: ""; display: inline-block; flex: 0 0 auto;
  width: 5px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.rw-done {
  display: inline-flex; align-items: center;
  color: var(--rw-good); font-weight: 600; font-size: .93rem; white-space: nowrap;
}
.rw-done::before {
  content: ""; width: 5px; height: 10px; margin-right: 8px; margin-bottom: 2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.rw-wait { color: var(--rw-dim); font-weight: 600; font-size: .89rem; white-space: nowrap; }

.rw-buy {
  padding: 13px 22px; border: none; border-radius: 13px; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 700; font-size: .97rem; color: #2a1e04;
  background: linear-gradient(135deg, #fde68a 0%, var(--rw-gold) 45%, var(--rw-gold-2) 100%);
  box-shadow: 0 12px 26px -12px rgba(246, 200, 81, .95), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
}
.rw-buy:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 16px 30px -12px rgba(246, 200, 81, 1), inset 0 1px 0 rgba(255,255,255,.5); }
.rw-buy:disabled { opacity: .55; cursor: default; }
.rw-msg { flex-basis: 100%; margin: 2px 0 0; color: var(--rw-muted); font-size: .89rem; }
.rw-msg.is-bad { color: var(--rw-bad); }

/* ---------- 6. Confirm before paying ------------------------------------- */
.rw-confirm {
  flex-basis: 100%; margin-top: 6px; padding: 18px; border-radius: 16px;
  background: var(--g-sheen), rgba(246, 200, 81, .07);
  border: 1px solid color-mix(in srgb, var(--rw-gold) 34%, var(--g-edge));
  box-shadow: inset 0 1px 0 var(--g-rim);
}
.rw-cq { margin: 0 0 13px; font-weight: 700; font-size: 1.02rem; }
.rw-cwho {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 12px; padding: 13px 15px; border-radius: 12px;
  background: rgba(0, 0, 0, .26); border: 1px solid var(--g-edge);
}
.rw-ctitle { font-size: 1.04rem; overflow-wrap: anywhere; }
.rw-curl { color: var(--accent-2); font-size: .9rem; overflow-wrap: anywhere; }
.rw-cfine { margin: 0 0 15px; color: var(--rw-muted); font-size: .87rem; }
.rw-crow { display: flex; flex-wrap: wrap; gap: 10px; }
.rw-cno {
  padding: 13px 20px; border-radius: 13px; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 600; font-size: .94rem; color: var(--rw-muted);
  background: transparent; border: 1px solid var(--g-edge);
  transition: color .16s ease, border-color .16s ease;
}
.rw-cno:hover:not(:disabled) { color: var(--rw-text); border-color: var(--rw-muted); }
.rw-cno:disabled { opacity: .55; cursor: default; }

/* ---------- 7. How it works ---------------------------------------------- */
.rw-how { margin-top: 30px; text-align: center; }
.rw-how h3 {
  margin: 0 0 16px; font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; font-weight: 700;
}
.rw-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 13px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step;
}
.rw-steps li {
  padding: 19px 17px 17px; border-radius: 16px; text-align: left;
  background: var(--g-sheen), var(--g-fill-2);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim);
}
.rw-steps li::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; margin-bottom: 11px; border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .87rem; color: #2a1e04;
  background: linear-gradient(135deg, #fde68a, var(--rw-gold-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.rw-steps strong { display: block; margin-bottom: 3px; font-size: .99rem; }
.rw-steps span { color: var(--rw-muted); font-size: .89rem; }
.rw-fine { max-width: 76ch; margin: 0 auto; color: var(--rw-dim); font-size: .82rem; }

/* ---------- 8. Return from payment --------------------------------------- */
.rw-flash {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 26px; padding: 15px 19px; border-radius: 15px; font-size: .95rem;
  color: #cfe9fb;
  background: var(--g-sheen), rgba(56, 189, 248, .09);
  border: 1px solid rgba(56, 189, 248, .3);
  box-shadow: inset 0 1px 0 var(--g-rim);
}
.rw-flash.is-ok { color: #c7f5e4; background: var(--g-sheen), rgba(52, 211, 153, .10); border-color: rgba(52, 211, 153, .34); }
/* Drawn, not typed, for the same reason as .rw-done. A dot for information, a tick for success. */
.rw-flash-ic {
  flex: 0 0 auto; display: block; width: 8px; height: 8px; margin-top: 7px;
  border-radius: 50%; background: currentColor;
}
.rw-flash-ic.is-tick {
  width: 6px; height: 11px; margin-top: 4px; border-radius: 0; background: none;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* ---------- 9. Accessibility fallbacks ----------------------------------- */
/* Someone who has asked their system for less transparency, or a browser with no
   backdrop-filter, gets solid panes instead of text over a half lit blur. */
@media (prefers-reduced-transparency: reduce) {
  .rw-price, .rw-panel, .rw-hit, .rw-steps li, .rw-flash, .rw-input {
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rw-price, .rw-panel, .rw-input { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  .rw-ends::before { animation: none; }
  .rw-buy, .rw-hit, .rw-input { transition: none; }
  .rw-buy:hover:not(:disabled) { transform: none; }
}

/* ---------- 10. Full width, used properly --------------------------------
   LAST IN THE FILE ON PURPOSE. These rules tie on specificity with the component
   rules above (.rw-how here vs .rw-how there), so they only win by coming later.
   Written at the top first, and the side column kept its centred heading and its
   30px top margin because section 7 overrode it. Keep this block at the bottom.

   It used to stop at 720px, which on a laptop left two thirds of the screen empty
   while the search sat in a strip down the middle. Stretching the search box to
   1500px would have been worse: a very wide text input is not a nicer one. So the
   page becomes two columns, the same answer connect-ai-glass.css gives: the search
   keeps a readable measure on the left, "How it works" moves beside it instead of
   being buried under the fold.

   Rows carry their own spacing through margins, so row-gap stays 0 and the flash
   row collapses on the ordinary visit where there is no banner. */
/* ONE COLUMN, at every width (founder 2026-10-31: "clean up that page to be neat").
   This used to be a grid: the search panel on the left, How it works sticky on the right. The two
   never balanced. Measured at 1200px the panel was 209px tall against a 513px column, so roughly
   300px of empty space sat under the search box on every desktop, which is what made the page look
   unfinished. One narrow centred column removes it, puts the search box where the eye already is,
   and lets the three steps sit side by side underneath the way they do on a phone. */

/* ---- The live look at the website, inside the confirmation ----
   The frame is a real 1280x800 scaled down by JS (transform-origin 0 0), so the site reads the way
   a laptop sees it rather than squeezed into a phone column. The ring sits where the badge sits:
   position fixed, 10px from the right and bottom of the page, which in a scaled frame is these
   percentages. pointer-events: none on the frame, so a tap goes to the confirm buttons and never
   into someone else's website. */
.rw-prevwrap { margin: 12px 0 0; }
.rw-prev {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: #0b1022;
}
.rw-prev-f { width: 1280px; height: 800px; border: 0; display: block; transform-origin: 0 0; pointer-events: none; }
.rw-prev-ring {
  position: absolute; right: .8%; bottom: 1.2%; width: 12%; min-width: 48px; height: 4%; min-height: 15px;
  border: 2px solid #ffd56b; border-radius: 8px; box-shadow: 0 0 0 3px rgba(255, 213, 107, .22);
  pointer-events: none;
}
.rw-prev-cap { margin: 7px 0 0; font-size: clamp(.71rem, 2.5vw, .82rem); opacity: .75; line-height: 1.45; }
/* Each of these two sits on ONE row (founder 2026-10-31), so the text is short and the caption
   gives back a little size on a narrow phone rather than spilling onto a second line. */

/* The 1280px frame must not drag the card wide. A flex item defaults to min-width: auto, so
   .rw-confirm grows to its content's intrinsic width (the frame) and bursts the card on a phone,
   leaving the preview unscaled at scale(1). Exactly the trap a bare 1fr sets; .rw-hinfo above
   already carries min-width: 0 for the same reason. */
.rw-confirm { min-width: 0; }
.rw-prevwrap { min-width: 0; max-width: 100%; }
.rw-prev { max-width: 100%; }