/* ============================================================================
   stasha.developeroffice.com
   ----------------------------------------------------------------------------
   The extension's own language — "sumi & shu": washi ground, sumi ink, ONE
   vermilion accent, hairlines instead of shadows, square corners, a Mincho serif
   for display. Tokens below are copied from src/popup/redesign/tokens.css so the
   site and the product read as one object.

   The site pushes it further than the popup can, toward the flat ukiyo-e poster:
   a beaten-gold (kinpaku) ground, the hinomaru disc, seigaiha wave scales, and
   one band of flat black. Restraint is what keeps that from becoming costume —
   the poster is spent entirely on the hero, every other band is quiet paper, and
   the black mass is used once, for the section about refusal.

   The ornament is SVG, not imagery: a filter for the leaf grain and a pattern
   for the waves. That keeps it crisp at any size, lets it re-colour for dark
   mode, and preserves the page's claim — no @font-face, no <script>, no remote
   anything. The product promises the same; the site should be able to keep it.
   ============================================================================ */

:root {
  --washi: #f5f2e9;       /* paper ground */
  --sheet: #faf7f0;       /* one sheet lighter */
  --sumi: #26231d;        /* ink */
  --usuzumi: #8d8677;     /* diluted ink — secondary text */
  --rule: #e2dccd;        /* hairline */
  --rule-soft: #ece8dc;
  --shu: #cd3a24;         /* hanko vermilion — the one accent */
  --shu-ink: #fdf9f0;
  --matcha: #6a8262;
  --lacquer: #16130f;     /* the flat black mass */

  /* Poster palette — used only by the hero band and the black band */
  --kin: #c9a45c;         /* beaten gold ground */
  --kin-ink: #241c0c;     /* type on gold: near-black, warmed */
  --kin-soft: #6b5426;    /* secondary type on gold */
  --wave: #b4452c;        /* seigaiha over gold — the print's red, knocked back */

  --measure: 34rem;       /* reading width */
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Songti SC", "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Kaku Gothic ProN",
          "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --washi: #17150f;
    --sheet: #1d1b14;
    --sumi: #ece7d9;
    --usuzumi: #9a9382;
    --rule: #34302a;
    --rule-soft: #26231d;
    --shu: #e0553c;
    --shu-ink: #17150f;
    --matcha: #8ba181;
    --lacquer: #0f0e0a;

    /* Lacquered gold rather than lit gold: the same leaf, seen by lamplight. */
    --kin: #6d5624;
    --kin-ink: #f6edd8;
    --kin-soft: #d8c393;
    --wave: #d4553a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--shu); }

:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 3px;
}

/* ---- Layout ------------------------------------------------------------- */

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

/* ---- Masthead ----------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}

/* A seal-sized hinomaru: the same mark the hero spends at full size, here at 7px.
   It is the only ornament allowed outside the poster band. */
.wordmark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--shu);
  transform: translateY(-0.15em);
}

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--usuzumi);
}

.masthead nav a { text-decoration: none; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--shu); }

/* ---- Bands -------------------------------------------------------------- */
/* A band is a full-bleed horizontal field of one colour. The page is a stack of
   them, the way a print is a stack of flat passes. */

.band { position: relative; isolation: isolate; }

.band--kin { background: var(--kin); color: var(--kin-ink); overflow: hidden; }

/* The poster layer fills its band and is cropped by it, so the disc bleeds off
   the edge at every width instead of being letterboxed into view. */
.band-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.band-art .art-ground { fill: var(--kin); }
.band-art .art-disc { fill: var(--shu); transform-box: view-box; transform-origin: 1050px 268px; }

/* On a phone the band is narrower than the art, so `slice` crops width and the disc lands squarely
   behind the headline — unreadable. Push it up into the corner, where it reads as the same mark
   cropped by the frame rather than as a stain under the type. Moving it beats hiding it: the disc is
   what makes the band a poster instead of a coloured rectangle. */
@media (max-width: 48rem) {
  .band-art .art-disc { transform: translate(190px, -300px) scale(0.6); }
}
/* The pattern's stroke has to be set on the pattern's own content, NOT via currentColor on the
   element that references it: content inside <defs> inherits from where it is DEFINED, so
   `currentColor` there resolves to the band's text colour and the waves silently came out as ink in
   light mode and cream in dark. Only the opacity belongs on the referencing group. */
.band-art .crests { stroke: var(--wave); }
.band-art .art-waves { opacity: 0.55; }

/* The flat black pass. Used exactly once, on the section about what the product
   will not do — the one place the page raises its voice. */
.band--sumi {
  background: var(--lacquer);
  color: #efe8d8;
  border-top: 0;
}

.band--sumi .rail-label,
.band--sumi p { color: #b0a48c; }
.band--sumi h2, .band--sumi h3 { color: #f6efdf; }
.band--sumi .rail > div > p:first-child { color: #efe8d8; }
/* On paper the hairlines are faded bamboo; on lacquer they have to be the light, not the dark. */
.band--sumi .refusals li { border-top-color: #3a3428; }
.band--sumi .refusals li::before { background: #e0553c; }

/* ---- Hero --------------------------------------------------------------- */

/* The lower padding is deliberately larger: it is the clearance that keeps the
   copy off the sea at the foot of the band. */
.hero {
  position: relative;
  padding-block: clamp(4rem, 13vw, 8rem) clamp(9rem, 26vw, 12rem);
}

.band--kin .eyebrow { color: var(--kin-soft); }
.band--kin .hero h1 { color: var(--kin-ink); }
.band--kin .hero .lede { color: var(--kin-ink); }
.band--kin .hero .lede + .lede { color: var(--kin-soft); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--usuzumi);
  margin: 0 0 1.75rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  max-width: 16ch;
}

.hero .lede {
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  color: var(--sumi);
  max-width: 30rem;
  margin: 0;
}

.hero .lede + .lede { margin-top: 1rem; color: var(--usuzumi); }

/* ---- The boundary: the signature element -------------------------------- */
/* A hairline frame that IS the edge of your machine. Everything the product
   does is drawn inside it; one line crosses, and it is labelled. The diagram is
   the privacy architecture, not an illustration of it. */

.boundary { margin: 0; }

.boundary figcaption {
  font-size: 0.8125rem;
  color: var(--usuzumi);
  max-width: var(--measure);
  margin-top: 1.5rem;
}

.diagram { width: 100%; max-width: 34rem; height: auto; display: block; }

.diagram .frame { fill: none; stroke: var(--sumi); stroke-width: 1; }
.diagram .hair { fill: none; stroke: var(--rule); stroke-width: 1; }
.diagram .flow { fill: none; stroke: var(--shu); stroke-width: 1; }
.diagram .label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--usuzumi);
}
.diagram .node {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--sumi);
}
.diagram .box { fill: var(--sheet); stroke: var(--rule); stroke-width: 1; }
.diagram .seal { fill: var(--shu); }
.diagram .seal-mark { fill: var(--shu-ink); font-family: var(--serif); font-size: 13px; }

/* The segments travelling down the pipeline. One orchestrated moment; nothing
   else on the page moves. */
.diagram .ticks rect {
  fill: var(--shu);
  animation: travel 4.5s linear infinite;
}
.diagram .ticks rect:nth-of-type(2) { animation-delay: -1.5s; }
.diagram .ticks rect:nth-of-type(3) { animation-delay: -3s; }

/* The travel distance is the spine's length in viewBox units (104 → 272), so a segment enters at
   the crossing and fades out at the save step — the same journey the text describes. */
@keyframes travel {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(168px); opacity: 0; }
}

/* Reduced motion drops to a single segment resting at the entry point. Freezing all three would
   scatter marks beside the node labels, where they read as specks rather than as one thing moving. */
@media (prefers-reduced-motion: reduce) {
  .diagram .ticks rect { animation: none; opacity: 1; }
  .diagram .ticks rect:nth-of-type(2), .diagram .ticks rect:nth-of-type(3) { display: none; }
}

/* ---- Sections ----------------------------------------------------------- */

.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  border-top: 1px solid var(--rule);
}

.section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
  margin: 0 0 2rem;
}

.section p { max-width: var(--measure); }

/* Two-column: a narrow label rail and the content. On mobile it stacks and the
   label becomes an eyebrow, which is what it already reads as. */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.rail > .rail-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--usuzumi);
  margin: 0;
  padding-top: 0.35rem;
}

@media (max-width: 40rem) {
  .rail { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Narrow screens: the masthead is a row of five items that cannot fit, and flex will happily push
   the last one past the viewport edge. Let it wrap to its own line instead. */
@media (max-width: 34rem) {
  .masthead { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .masthead nav { margin-left: 0; width: 100%; gap: 1rem; flex-wrap: wrap; }
}

/* ---- Format list -------------------------------------------------------- */

.formats { list-style: none; margin: 0; padding: 0; }

.formats li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}

.formats li:first-child { border-top: 1px solid var(--rule-soft); }

.formats dfn {
  font-style: normal;
  font-family: var(--serif);
  font-size: 1.0625rem;
}

.formats code { font-family: var(--mono); font-size: 0.875em; color: var(--usuzumi); }
.formats p { margin: 0; color: var(--usuzumi); font-size: 0.9375rem; }

/* ---- Steps — a real sequence, so it is numbered -------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.steps li {
  counter-increment: step;
  display: grid;
  /* Explicit areas, not a bare two-column track list: the item has THREE children (the ::before
     counter, the heading and the paragraph), and a two-column grid would flow the paragraph into
     the 3rem number column — which renders it one word wide. */
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas:
    "num  title"
    "num  body";
  column-gap: 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-area: num;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--shu);
  padding-top: 0.35rem;
  letter-spacing: 0.05em;
}

.steps h3 { grid-area: title; }
.steps p { grid-area: body; }

.steps h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.35rem;
}

.steps p { margin: 0; color: var(--usuzumi); font-size: 0.9375rem; }

/* ---- Refusals — the vermilion is spent here ----------------------------- */

.refusals { list-style: none; margin: 0; padding: 0; }

.refusals li {
  padding: 1.5rem 0 1.5rem 2.25rem;
  border-top: 1px solid var(--rule-soft);
  position: relative;
  max-width: var(--measure);
}

/* A single struck stroke: the mark a seal leaves through something refused. */
.refusals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.95rem;
  width: 1.25rem;
  height: 1px;
  background: var(--shu);
}

.refusals h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.35rem;
}

.refusals p { margin: 0; color: var(--usuzumi); font-size: 0.9375rem; }

/* ---- Install ------------------------------------------------------------ */

.stores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.stores li { background: var(--sheet); padding: 1.5rem; }

.stores .store-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  display: block;
  margin-bottom: 0.3rem;
}

.stores .store-state {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--usuzumi);
}

.stores .store-note { font-size: 0.8125rem; color: var(--usuzumi); margin: 0.6rem 0 0; }

/* ---- Footer ------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 4rem;
  font-size: 0.875rem;
  color: var(--usuzumi);
}

.foot nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.foot p { margin: 0 0 0.5rem; max-width: var(--measure); }

/* ---- Document pages (privacy) ------------------------------------------- */

.doc { padding-block: clamp(2.5rem, 7vw, 4.5rem) 2rem; }

.doc h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  max-width: 20ch;
}

.doc .updated {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--usuzumi);
  margin: 0 0 3rem;
}

.doc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin: 3.5rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.doc h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1875rem;
  margin: 2.5rem 0 0.75rem;
  max-width: var(--measure);
}

.doc p, .doc li { max-width: var(--measure); }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; }
.doc li::marker { color: var(--usuzumi); }

.doc code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--sheet);
  border: 1px solid var(--rule-soft);
  padding: 0.05em 0.3em;
}

.doc blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 1px solid var(--shu);
  color: var(--usuzumi);
  max-width: var(--measure);
}

.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* Tables carry the "what is stored / what is sent" detail — the densest and
   most load-bearing content in the policy, so it gets a real grid. */
.doc .table-scroll { overflow-x: auto; margin: 1.5rem 0; }

.doc table {
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 34rem;
}

.doc th, .doc td {
  border: 1px solid var(--rule);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.doc th { background: var(--sheet); font-weight: 600; }

/* ---- Support page ------------------------------------------------------- */

.contact {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  display: inline-block;
  margin: 0.5rem 0 0;
  text-decoration-color: var(--shu);
}

.faq { margin-top: 3rem; }
.faq h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 2rem 0 0.4rem;
}
.faq p { margin: 0; color: var(--usuzumi); }