/* article.css, proposals lane.
   No uppercase micro-labels anywhere. No disclaimer boxes. Everything shown is built in HTML. */

.article-page{
  --a-ground:#F5EFE2;        /* the homepage ground, not a second paper */
  --a-raised:#FBF7EE;
  /* the site inks, not a second set. The article ground is the site ground, so
     the ink on it has to be the site ink or the copy reads harder here. */
  --a-ink:#161613;
  --a-ink-2:#4a4a44;
  --a-ink-3:#6B6B66;
  --a-rule:rgba(20,22,26,.10);
  --a-line:rgba(20,22,26,.06);
  --a-accent:#1F5FA8;
  --a-measure:46rem;
  --page-measure:46rem;
  --page-pad:1.5rem;
  background:var(--a-ground);
  color:var(--a-ink);
}

/* ── scroll progress ─────────────────────── */
.art-progress{
  position:fixed; inset:0 auto auto 0; z-index:80;
  height:4px; width:0%;
  background:var(--mark-dot);
  transition:width .08s linear;
}

/* The wrapper takes the same column the design cases use, so an article starts
   on the same left edge as Finanzcheck. The reading measure still governs the
   text, left aligned inside that column rather than centred in the window. */
.article-page .art-wrap{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:clamp(26px,6vw,40px);
}
.article-page .art-wrap > *{ max-width:var(--a-measure); }
.article-page .art-wrap > .art-byline,
.article-page .art-wrap > .art-figlink,
.article-page .art-wrap > .art-tags{ max-width:var(--a-measure); }

/* ── masthead ─────────────────────────────── */
.art-head{ padding:clamp(7.5rem,14vw,12.5rem) 0 0; }
.art-back{
  display:inline-block; margin-bottom:2rem;
  font-size:.95rem; color:var(--a-ink-3); text-decoration:none;
}
.art-back:hover{ color:var(--a-ink); }
.art-eyebrow{
  font-size:.8125rem; color:var(--a-ink-3); margin:0 0 1.1rem; font-weight:400;
}
.art-title{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:700; font-size:var(--t-title);
  line-height:1.05; letter-spacing:-.025em; margin:0 0 var(--sp-hero-gap);
  max-width:20ch; text-wrap:balance;
}
/* The titles carry hard breaks for the desktop line lengths. Under about a
   430px viewport the longest of those lines runs past the edge and gets
   clipped by the body's overflow-x, so let the text wrap on its own. Both
   titles carry a space before the break, so hiding it still separates the
   words: keep that in any title that adds one. */
@media (max-width: 520px){ .art-title br{ display:none; } }
.art-title em{ font-style:normal; }
.art-standfirst{
  font-size:var(--t-lede); line-height:1.55; color:var(--a-ink-3);
  max-width:50ch; margin:0 0 2rem; text-wrap:pretty;
}
.art-byline{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--a-rule); border-bottom:1px solid var(--a-rule);
  font-size:.92rem; color:var(--a-ink-3);
}

/* ── topic tags ───────────────────────────── */
/* Small text rather than pills. They are scope, read once, not controls:
   nothing links anywhere and there is no tag index behind them. */
.art-tags{
  display:flex; flex-wrap:wrap; gap:.2rem 1.1rem;
  margin:1.5rem 0 0; padding:0; list-style:none;
}
.art-tags a, .art-tags span{
  display:inline-block; padding:0; border:0; background:none; border-radius:0;
  font-size:.82rem; line-height:1.5; letter-spacing:.005em;
  color:var(--a-ink-3); text-decoration:none;
}
.art-tags a:hover{ color:var(--a-ink); }

/* ── on-page nav, the sticky rail the case pages use ── */
.art-rail{ display:none; }
@media (min-width: 1100px){
  .art-rail{
    display:block; position:fixed; top:132px; z-index:5;
    left:calc(50% + 24.5rem); width:132px;
  }
  .art-rail{ transition:opacity .3s ease; }
}

/* ── body ─────────────────────────────────── */
.art-body{ padding:2.6rem 0 5rem; }
.art-body h2{
  font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600;
  font-size:var(--t-head); line-height:1.18; letter-spacing:-.015em;
  margin:2.6rem 0 .85rem; max-width:30ch; scroll-margin-top:5rem; text-wrap:balance;
}
.art-body p{
  font-size:var(--t-body); line-height:1.66; color:var(--a-ink-2);
  max-width:64ch; margin:0 0 1.15rem; text-wrap:pretty;
}
/* the opening paragraph is the body size like everywhere else on the site; it
   used to carry a drop cap, which was the only serif here. */
.art-body p.lead{ color:var(--a-ink); margin-bottom:1.3rem; }
.art-body code{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.87em; background:rgba(20,22,26,.055);
  padding:.1em .3em; border-radius:4px; margin-inline:.04em;
}
.art-pull{
  margin:2.6rem 0; padding:1.5rem 0 0;
  border-top:1px solid var(--a-ink);
  font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.45; letter-spacing:-.01em;
  text-wrap:pretty; max-width:34rem;
}
.art-pull cite{
  display:block; margin-top:.9rem; font-family:Inter,system-ui,sans-serif;
  font-size:.9rem; font-style:normal; color:var(--a-ink-3); letter-spacing:.005em;
}

/* ── the record table ─────────────────────── */
.art-record{ margin:2.2rem 0; border-top:1px solid var(--a-rule); }
.art-record div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:1.2rem;
  padding:.85rem 0; border-bottom:1px solid var(--a-line); align-items:baseline;
}
.art-record dt{ margin:0; font-weight:500; }
.art-record dd{ margin:0; color:var(--a-ink-2); }
.art-record div.is-now dt,.art-record div.is-now dd{ color:var(--a-accent); }

/* ── device frames, exported from the Figma file itself ──── */
.demo{ margin:2.6rem 0; }
/* Every screen is 16rem wide, on every row and every page, so nothing eclipses
   the viewport and nothing has to scroll sideways to fit. */
.demo__row{ display:grid; gap:1.7rem 1.2rem; justify-content:start;
  grid-template-columns:repeat(auto-fill, minmax(min(16rem,100%), 16rem)); }
.demo figure{ margin:0; }
.figframe{ display:block; width:100%; height:auto; overflow:visible; }
.demo figcaption{ margin-top:.5rem; font-size:.95rem; line-height:1.55; color:var(--a-ink-3); }
.demo figcaption b{ color:var(--a-ink); font-weight:500; display:block; margin-bottom:.15rem; }
.demo figcaption.is-flag b{ color:#B3121B; }
.demo figcaption.is-good b{ color:#1F7A52; }

/* Nothing in the body is wider than the copy. The on-page rail owns the space
   to the right of the column. */
.article-page article{ overflow-x:clip; }

/* hero demo sits wider */
.hero-demo{ margin:2.4rem 0 0; }

/* ── end matter ───────────────────────────── */
.art-end{ margin-top:3.2rem; padding-top:1.5rem; border-top:1px solid var(--a-rule);
  font-size:1rem; line-height:1.7; color:var(--a-ink-2); }
.art-end a{ color:var(--a-accent); }
.art-share{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.98rem; }
.art-share a{ color:var(--a-ink-2); }
.art-figlink{ margin:1.5rem 0 0; display:flex; flex-wrap:nowrap; gap:.5rem; }
.art-figlink a{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.78rem 1.2rem; border-radius:10px;
  background:var(--a-ink); color:var(--a-ground);
  font-size:.95rem; font-weight:500; letter-spacing:-.005em; text-decoration:none;
  white-space:nowrap;
  transition:transform var(--t-snap) ease, background var(--t-snap) ease;
}
.art-figlink a::after{ content:"\2197"; font-size:1em; opacity:.7; }
.art-figlink a:hover{ background:#000; transform:translateY(-1px); }

/* The prototype is the second destination, kept quiet so the hero carries one
   button rather than two competing ones, and so both fit a phone on one row. */
.art-figlink{ align-items:center; }
.art-figlink a.art-figlink__alt{
  background:none; color:var(--a-ink-2); box-shadow:none;
  padding:.78rem .5rem; font-weight:500;
}
.art-figlink a.art-figlink__alt::after{ content:"\2192"; opacity:.55; }
.art-figlink a.art-figlink__alt:hover{
  background:none; color:var(--a-ink); text-decoration:underline; text-underline-offset:3px;
  transform:none;
}
@media (max-width:520px){
  .art-figlink{ gap:.25rem; }
  .art-figlink a{ padding:.7rem .95rem; font-size:.88rem; gap:.4rem; }
  .art-figlink a.art-figlink__alt{ padding:.7rem .4rem; }
}
@media (max-width:390px){
  .art-figlink a{ padding:.66rem .8rem; font-size:.84rem; }
  .art-figlink a.art-figlink__alt{ padding:.66rem .3rem; }
}

/* ── code block ───────────────────────────── */
.art-pre{
  margin:2rem 0; padding:1.4rem 1.5rem; overflow-x:auto;
  background:#141618; color:#D9D6D0; border-radius:12px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.8rem; line-height:1.8; letter-spacing:.005em;
}
.art-pre b{ color:#9BD8BC; font-weight:400; }
.art-pre em{ color:#8A8F98; font-style:normal; }

/* ── the three shipping layers ────────────── */
.art-layers{ margin:2.4rem 0; display:grid; gap:1px; background:var(--a-rule);
  border:1px solid var(--a-rule); border-radius:14px; overflow:hidden; }
.art-layers > div{ background:var(--a-raised); padding:1.4rem 1.5rem; }
.art-body .art-layers h3, .art-layers h3{ margin:0 0 .5rem; font-size:1.15rem; font-weight:500; letter-spacing:-.01em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; }
/* The price of each layer still reads in the colour; the pill around it was
   one more object on a page that already has enough. */
.art-layers h3 span{ font-size:.85rem; font-weight:500; color:var(--a-ink-3);
  border:0; border-radius:0; padding:0; margin-left:.15rem;
  white-space:nowrap; }
.art-layers h3 span.is-free{ color:#1F7A52; }
.art-layers h3 span.is-cheap{ color:#8A6A12; }
.art-layers h3 span.is-real{ color:#B3121B; }
.art-body .art-layers p, .art-layers p{ margin:0 0 .6rem; font-size:1rem; line-height:1.6; color:var(--a-ink-2); }
.art-body .art-layers p:last-child, .art-layers p:last-child{ margin-bottom:0; }
.art-layers code{ font-size:.85em; }

/* ── screen frames, exported from the Figma file ── */
.bgrid{ display:grid; gap:1.7rem 1.2rem; justify-content:start;
  grid-template-columns:repeat(auto-fill, minmax(min(16rem,100%), 16rem)); }
/* the frames carry their own device corners, so the shadow has to follow the alpha
   rather than the box, and no border or backing may be painted behind them */
.bframe{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 1px 1px rgba(20,22,26,.10)) drop-shadow(0 14px 26px rgba(20,22,26,.20)); }


/* ── drawings on their own ground, exported from Figma at two widths ── */
/* A figure that is a drawing rather than a device frame. Exported at 736 for
   the reading column and 338 for the phone column; each wrapper is capped at
   the width it was drawn at, so a drawing only scales down and never past 1.
   The toggle sits on the same 719.98px breakpoint the article teasers use in
   style.css, so the whole site changes drawing at one width. Inlined rather
   than loaded through <img>, because WebKit rasterises an <img> SVG at CSS
   resolution and the drawing goes soft on a phone. First written for the AI
   article in pages/ai-product-team.css; shared here since the 404 search
   article uses the same figure. */
.art-il { display: block; line-height: 0; max-width: calc(var(--w) * 1px); }
.art-il svg { display: block; width: 100%; height: auto; }
.art-il--m { display: none; }
@media (max-width: 719.98px) {
  .art-il--d { display: none; }
  .art-il--m { display: block; }
}

/* the Figma panel is one shared component in style.css.
   The article only decides how wide it sits. */
.article-page .figma-out{
  padding-top:clamp(1.6rem,3vw,2.4rem); padding-bottom:0;
}

/* .art-body h2/p outrank the bare component classes, so the section rhythm
   would otherwise leak into the shared panel and inflate its height. */
.art-body .figma-out__h{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.14; color:#F5EFE2; margin:0 0 10px;
}
.art-body .figma-out__p{
  font-size:.98rem; line-height:1.55; color:rgba(245,239,226,.62);
  margin:0; max-width:52ch;
}

/* ── the other proposal, as a deliberate step ── */
.art-next{
  display:grid; margin:1.6rem 0 0; padding:1.5rem 0 .2rem;
  border-top:1px solid var(--a-rule);
  text-decoration:none; color:inherit;
  grid-template-columns:1fr auto; align-items:start; column-gap:1.5rem;
}
.art-next__k{ grid-column:1; font-size:.9rem; color:var(--a-ink-3); margin-bottom:.45rem; }
.art-body .art-next__t, .art-next__t{ grid-column:1; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.2; letter-spacing:-.015em;
  margin-bottom:.4rem; }
.art-body .art-next__s, .art-next__s{ grid-column:1; font-size:1rem; line-height:1.55; color:var(--a-ink-2);
  max-width:52ch; }
.art-next__go{ grid-column:2; grid-row:1 / span 3; align-self:center;
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--a-rule);
  display:grid; place-items:center; font-size:1rem; color:var(--a-ink);
  transition:background var(--t-snap) ease, color var(--t-snap) ease, transform var(--t-snap) ease; }
.art-next:hover .art-next__go{ background:var(--a-ink); color:var(--a-ground);
  transform:translateX(2px); }
.art-next:hover .art-next__t{ text-decoration:underline; text-underline-offset:3px; }


/* ── masthead, full bleed so the dot field runs behind the nav ── */
.art-hero{ position:relative; overflow:hidden; isolation:isolate; }
.art-hero > .art-wrap{ position:relative; z-index:1; }
.art-hero .hero__dots{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);
}

/* ── articles index ───────────────────────── */

.idx-wrap{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }

/* The articles index was carrying 96px of hero padding plus a 36px margin
   before the teasers, and only 38 plus the strip's 30 after them: 132 above,
   68 below. Both sides now come off the site's own --sp-tight token, minus
   what the following section already contributes. */
/* The hero keeps the padding every other page's hero has, so the pages agree.
   The rhythm is balanced with the teaser margin instead: the gap below is the
   wrap padding plus the 30px the CTA strip already contributes. */
.article-index .teasers{ margin-top:0; }
.article-index .idx-wrap{
  padding-top:0;
  padding-bottom:max(0px, calc(var(--sp-tight) - 30px));
}

/* the other proposal, with its own thumbnail */
.art-next--thumb{ grid-template-columns:auto 1fr auto; column-gap:1.5rem; align-items:center; }
.art-next__thumb{
  grid-column:1; grid-row:1 / span 3; align-self:center;
  display:block; width:clamp(64px,8vw,88px); aspect-ratio:4/5;
  border-radius:10px; overflow:hidden;
  background:var(--a-raised);
  box-shadow:0 1px 2px rgba(20,22,26,.08), 0 10px 20px -12px rgba(20,22,26,.30);
  transition:transform .35s var(--ease-sheet);
}
.art-next__thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.art-next--thumb:hover .art-next__thumb{ transform:translateY(-3px); }
.art-next--thumb .art-next__k,
.art-next--thumb .art-next__t,
.art-next--thumb .art-next__s{ grid-column:2; }
.art-next--thumb .art-next__go{ grid-column:3; }
@media (max-width:40rem){ .art-next__thumb{ display:none; } }

/* the articles index is a lane page like Product and Experience, and all three
   now sit in the same column the design cases use. */
.article-page{ --page-measure:1100px; --page-pad:clamp(26px,6vw,40px); }
.article-index{ --page-measure:1100px; --page-pad:clamp(26px,6vw,40px); }
.article-index .idx-wrap{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }

/* On a phone the reading column is narrower than two screens and wider than
   one, so a fixed 16rem track left the images at 74% width against full width
   text, with a ragged empty gutter down the right. One screen per row, filling
   the column. */
@media (max-width:34rem){
  /* Two screens per row, always, including the before and after pairs, which
     only read as a comparison when they sit beside each other. One per row made
     the page 22 phone screens long. Captions sit under their own screen and
     align to the bottom of the row, so a short one does not float. */
  .demo__row, .bgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.4rem .8rem; }
  .demo figure, .bgrid figure{ display:flex; flex-direction:column; height:100%; }
  .demo figcaption, .bgrid figcaption{ margin-top:.55rem; font-size:.82rem; line-height:1.45; }
  .demo figcaption b, .bgrid figcaption b{ margin-bottom:.1rem; }

  /* the code block holds AOSP constants that are longer than a phone is wide,
     so it wraps with a hanging indent rather than scrolling sideways */
  .art-pre{
    font-size:11px; line-height:1.7; padding:1.1rem 1rem;
    overflow-x:visible; white-space:pre-wrap; overflow-wrap:anywhere;
    padding-left:2.1rem; text-indent:-1rem;
  }
}

/* ── tap a screen to inspect it ─────────────────────────────────────────────
   Two screens per row keeps the page short, but 166px on a phone is 40% scale
   and a UI is not readable at that size. Tapping one opens it at full width.
   Pointer devices already have the room, so this is phone only. */
.shot-view{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(20,22,26,.92);
  padding:max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  overflow:auto; overscroll-behavior:contain;
}
.shot-view[open]{ display:grid; grid-template-rows:1fr auto; gap:1rem; place-items:center; }
.shot-view__stage{ display:contents; }
.shot-view img, .shot-view svg{
  max-width:min(100%, 26rem); max-height:70vh; width:auto; height:auto;
  border-radius:14px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
.shot-view__cap{
  color:#F5EFE2; font-size:.92rem; line-height:1.5; text-align:center;
  max-width:34rem; margin:0;
}
.shot-view__cap b{ display:block; font-weight:600; margin-bottom:.15rem; }
.shot-view__close{
  position:fixed; top:max(.75rem, env(safe-area-inset-top)); right:.9rem;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(245,239,226,.28);
  background:rgba(20,22,26,.72); color:#F5EFE2; font-size:1.05rem; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media (min-width:34.01rem){ .shot-view, .shot-view__close{ display:none !important; } }
@media (max-width:34rem){
  .demo figure img, .bgrid figure img,
  .demo figure > svg, .bgrid figure > svg{ cursor:zoom-in; }
}

/* ── the prototype, as a panel held off the edges so the case stays visible ── */
.proto-ov{
  position:fixed; inset:0; z-index:200;
  display:grid; padding:clamp(10px,1.8vw,24px);
  background:rgba(22,22,19,.40);
  -webkit-backdrop-filter:blur(8px) saturate(.9); backdrop-filter:blur(8px) saturate(.9);
  opacity:0; will-change:opacity;
  transition:opacity .24s var(--ease-out);
}
/* An author display value outranks the UA sheet's [hidden]{display:none}, so
   without this the closed overlay stays in the layout at opacity 0 and eats
   every click on the page underneath. */
.proto-ov[hidden]{ display:none; }
.proto-ov[data-open]{ opacity:1; }
.proto-ov__panel{
  position:relative; overflow:hidden; min-height:0;
  border-radius:clamp(14px,2vw,22px); background:var(--a-ground);
  box-shadow:0 0 0 1px rgba(20,22,26,.10), 0 30px 80px -30px rgba(20,22,26,.55);
  transform:scale(.985) translateY(8px); will-change:transform;
  transition:transform .3s var(--ease-out);
}
.proto-ov[data-open] .proto-ov__panel{ transform:none; }
.proto-ov__frame{ width:100%; height:100%; border:0; display:block; }
.proto-ov__close{
  position:absolute; z-index:2; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .95rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--a-ink); color:var(--a-ground);
  font:500 .88rem/1 Inter,system-ui,-apple-system,sans-serif; letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(20,22,26,.14), 0 10px 24px -14px rgba(20,22,26,.5);
  transition:background var(--t-snap) ease, transform var(--t-snap) ease;
}
.proto-ov__close:hover{ background:#000; transform:translateY(-1px); }
.proto-ov__close:focus-visible{ outline:2px solid var(--a-ground); outline-offset:2px; }
/* On a phone the inset is a hairline rather than a frame: there is no room to
   spend, and the shadow plus the dimmed ground still read as an overlay. */
@media (max-width: 720px){
  .proto-ov{ padding:6px; }
  .proto-ov__panel{ border-radius:14px; }
  .proto-ov__close{ top:8px; right:8px; padding:.5rem .8rem; font-size:.82rem; }
}
@media (prefers-reduced-motion: reduce){
  .proto-ov, .proto-ov__panel{ transition-duration:1ms; }
}

/* ── end of a case: back on the left, the other case on the right ── */
.art-jump{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.9rem 2rem; margin:2.6rem 0 0; padding:1.4rem 0 .2rem;
  border-top:1px solid var(--a-rule);
}
.art-jump a{
  display:inline-flex; align-items:baseline; gap:.55rem;
  font-size:1rem; line-height:1.5; color:var(--a-ink-3); text-decoration:none;
  transition:color var(--t-snap) ease;
}
.art-jump a:hover{ color:var(--a-ink); }
.art-jump__next{ max-width:34ch; text-align:right; }
.art-jump__arr{ transition:transform var(--t-snap) ease; }
.art-jump__prev:hover .art-jump__arr{ transform:translateX(-3px); }
.art-jump__next:hover .art-jump__arr{ transform:translateX(3px); }
@media (max-width: 520px){
  .art-jump{ flex-direction:column; }
  .art-jump__next{ text-align:left; max-width:none; }
}