/* Responsive: 1200 (narrow desktop), 1024 (tablet landscape),
   860 (tablet portrait), 640 (phone). Down to 641 the app's screens keep
   their desktop sizes; at a phone's width they take the app's own phone
   layout (its type, rows, fields and picker), so each one is what the
   app itself draws on that phone. */

@media (max-width: 1200px) {
  :root { --pad: 40px; }
  .display { font-size: 64px; }
  /* Each headline size rounds its letters' metrics its own way, so each
     takes back its own measured foot; the gaps stay 36. */
  .hero-title { font-size: 88px; margin-bottom: -0.263em; }
  .cta-title { margin-bottom: -0.298em; }
  .showcase { grid-template-columns: 448px minmax(0, 1fr); }
  .dl-pitch { padding: 40px 32px 40px 40px; }
  .dl-stage { padding: 32px; }
  .flow { gap: 56px; padding: 40px; }
  .trust { gap: 24px; padding: 40px; }
}

@media (max-width: 1024px) {
  :root { --sec-y: 96px; }
  .h2 { font-size: 40px; }
  /* Stacked: the title to its intro at the page's text step, 36 from
     baseline to capitals. */
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 48px; }
  .sec-lead { max-width: 600px; }

  .hero { padding-top: 96px; }
  .hero-title { margin-top: calc(36px - 0.151em); margin-bottom: -0.285em; font-size: 76px; }
  /* The band stacks: the lockup over a full-width drift. */
  .trustband { grid-template-columns: minmax(0, 1fr); margin-top: 88px; }
  .hero { padding-bottom: calc(var(--sec-y) - 28px); }
  .tb-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 20px; row-gap: 6px; padding: 24px var(--pad) 20px; }
  .tb-sub { margin-top: 0; }
  .marquee { padding: 0 0 28px; }

  /* The split stacks: the steps, then the frame. */
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .dl-pitch { padding: 40px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .dl-steps { max-width: 560px; }
  .dl-stage { padding: 40px; }
  .dl-frame { max-width: 640px; }

  /* The run reads top to bottom. */
  .flow { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 56px; padding: 40px; }
  .flow-app, .flow-mail { width: 100%; max-width: 560px; justify-self: center; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A half-width tile: the net worth card tightens so its legend keeps
     to two lines. */
  .nw { padding: 20px 20px 16px; }
  .nw-mix { margin-top: 18px; }
  .nw-legend { column-gap: 14px; }
  .trust { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .trust-frame { width: 100%; max-width: 560px; }

  /* Four cells become a 2x2 whose rules cross cleanly. */
  .cells-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells-4 .cell { padding-bottom: 28px; }
  .cells-4 .cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .cells-4 .cell:nth-child(n + 3) { border-top: 1px solid var(--rail); padding-bottom: 0; }

  .cta-title { font-size: 64px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .cells-3 { grid-template-columns: minmax(0, 1fr); }
  .cells-3 .cell { padding: 24px 0; border-left: 0; }
  .cells-3 .cell + .cell { padding-left: 0; border-top: 1px solid var(--rail); }
  .cells-3 .cell:last-child { padding-bottom: 0; }
  .cells-3 .cell-ico { margin-bottom: 10px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --sec-y: 80px; --nav-h: 56px; --foot-h: calc(98px + env(safe-area-inset-bottom, 0px)); }
  /* No rails on a phone: the frame spends its width on content. */
  .frame { width: 100%; border: 0; }
  .nav-inner, .footer-inner { width: 100%; }
  .nav-inner { gap: 16px; }
  .nav-actions { gap: 6px; }

  .display { font-size: 44px; line-height: 1.05; letter-spacing: -0.028em; }
  .h2 { font-size: 32px; line-height: 1.125; letter-spacing: -0.022em; }
  .h2-ln { display: inline; }
  .lead { font-size: 17px; line-height: 26px; }
  .eyebrow { margin-bottom: 14px; }
  /* 30 from the title to its intro, as in the hero; 48 from the intro
     to what it introduces. */
  .sec-head { gap: 17px; margin-bottom: 41px; }

  /* The hero takes the whole first screen: its words centered in it,
     the institutions starting just under the fold. */
  .hero { padding-top: 0; }
  .hero-copy { min-height: calc(100svh - var(--nav-h)); justify-content: center; padding: 28px 0 64px; }
  .trustband { margin-top: 0 !important; }
  /* One word to a line, as large as the longest ("infrastructure",
     5.63 times the type size) allows on this screen. */
  /* The stack steps 30 a gap; at this line height the headline's box
     stands 0.158em above its capitals and 0.206em + 6.4 below its
     baseline (measured from 52 to 72). */
  .hero-title { margin-top: calc(30px - 0.158em); margin-bottom: calc(-0.206em - 6.4px); font-size: clamp(52px, calc((100vw - 40px) / 5.75), 72px); line-height: 1; letter-spacing: -0.034em; }
  .ht-w { display: block; }
  .hero-lead { max-width: none; }
  /* On a phone: a soft light from above and a horizon at the
     foot of the first screen. The light starts at the hero's top edge
     but fades in over its first 160px, so it never meets the bar in a
     hard line. */
  .hero-light { top: 0; width: 900px; margin-left: -450px; height: 760px; background: radial-gradient(60% 30% at 50% 26%, oklch(1 0 0 / 0.09), transparent 72%); animation: none; -webkit-mask: linear-gradient(transparent, #000 160px, #000 34%, transparent 80%); mask: linear-gradient(transparent, #000 160px, #000 34%, transparent 80%); }
  .hero-horizon { display: block; position: absolute; left: 0; right: 0; top: calc(100svh - var(--nav-h) - 104px); height: 420px; }
  .hz-glow { position: absolute; left: 50%; top: -150px; width: 760px; height: 300px; margin-left: -380px; background: radial-gradient(50% 50% at 50% 100%, oklch(1 0 0 / 0.15), transparent 72%); -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); }
  .hz-arc { position: absolute; left: 50%; top: 0; width: 1240px; height: 900px; margin-left: -620px; border-radius: 50%; background: radial-gradient(34% 12% at 50% 0%, oklch(0.2 0 0), #000 100%); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), inset 0 18px 40px -22px oklch(1 0 0 / 0.28); -webkit-mask: linear-gradient(90deg, transparent 29%, #000 43%, #000 57%, transparent 71%); mask: linear-gradient(90deg, transparent 29%, #000 43%, #000 57%, transparent 71%); }
  .hero-lead { margin-top: 30px; font-size: 17px; line-height: 26px; }
  /* On a phone each sentence starts its own line. */
  .hero-lead .ls { display: block; }
  /* The ways in: two equal halves, each a full 44 target with 10
     between them, once both labels fit whole (186 for "Connect with
     Plaid"); narrower, one full-width column, the pair stacked. Equal
     either way. The facts on one line under them. */
  .hero-ctas { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); align-items: stretch; width: 100%; gap: 10px; margin-top: 23px; }
  .hero-ctas .ui-btn { height: 44px; padding: 0 13px; font-size: 15px; }
  .hero-trust { gap: 8px 16px; margin-top: 25px; }
  .tl-long { display: none; }
  .tl-short { display: inline; }

  .trustband { margin-top: 64px; }
  .tb-head { display: block; }
  .tb-sub { margin-top: 6px; }
  .marquee { gap: 10px; padding: 0 0 28px; -webkit-mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
  .mq-set { gap: 10px; padding-right: 10px; }
  .mq-chip { height: 40px; padding: 0 14px 0 6px; font-size: 13.5px; }

  /* The canvases give up their box on a phone: the app's screens sit on
     the page's own gutters, one frame deep instead of two. */
  .canvas { border: 0; border-radius: 0; background: none; overflow: visible; }
  .canvas::before { display: none; }

  .dl-pitch { padding: 0 0 32px; border-bottom: 0; }
  .dl-step-t { font-size: 15px; line-height: 22px; }
  .dl-prompt-line { padding: 10px 12px 10px 14px; font-size: 15px; line-height: 24px; }
  .dl-ask-toggle { font-size: 15px; }
  /* The menu hangs from the prompt box, edge to edge, so it stays on
     screen wherever the ask has wrapped to. */
  .dl-ask-wrap { position: static; }
  .dl-menu { top: calc(100% + 7px); left: -1px; right: -1px; min-width: 0; }
  .dl-menu-item { height: auto; min-height: 34px; padding-block: 6px; white-space: normal; }
  .dl-stage { padding: 0; }
  .tpl { height: 440px; padding: 18px 16px; }
  .tpl .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tpl .stat:nth-child(3) { display: none; }
  .ui-url { font-size: 11px; }
  .dl-ready-more { display: none; }

  /* Automations in the phone's automation page: the card's lines 15/20
     and its foot 13/18; a check's status and time on one line, what it
     found under them; the log 13/18. */
  .flow { padding: 0; gap: 40px; }
  .autocard { gap: 12px; padding: 16px; border-radius: 12px; }
  .ac-n, .ac-r { font-size: 15px; line-height: 20px; }
  .ac-foot { gap: 8px; font-size: 13px; line-height: 18px; }
  .ac-next span { overflow: visible; }
  .col-title { margin: 24px 0 8px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
  .runlist { border-radius: 12px; }
  .runrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; height: auto; min-height: 44px; padding: 12px 16px; font-size: 15px; line-height: 20px; }
  .run-state { grid-area: 1 / 1; width: auto; min-width: 0; gap: 8px; }
  .run-state .dur { font-size: 13px; line-height: 18px; }
  .run-when { grid-area: 1 / 2; gap: 8px; font-size: 13px; line-height: 18px; }
  .run-desc { grid-area: 2 / 1 / auto / -1; padding-left: 20px; }
  /* The whole log shows, every line, in room kept from the start: lines
     fade in where they will sit, so the email under it never moves while
     a thumb is scrolling. */
  .run-log, .log-lines .l.is-pending { grid-template-rows: 1fr; }
  .runrow-log { padding: 12px 16px 16px; }
  .log-lines { font-size: 13px; line-height: 21px; }
  .log-lines .l-in { gap: 12px; }
  .flow-mail { border-radius: 12px; }
  .mail-head { padding: 12px 16px; }
  .mail-page { padding: 16px; }
  .mail-brand { padding: 0 2px 14px; font-size: 18px; }
  .mail-card { padding: 20px; border-radius: 14px; }
  .mail-h { font-size: 17px; line-height: 22px; }
  .mail-lines { margin-top: 10px; }
  .mail-lines li { font-size: 15px; line-height: 22px; }
  .mail-btn { height: 40px; margin-top: 16px; }

  .bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* Security: the consent page and Access, in the phone's type. */
  .trust { padding: 0; gap: 24px; }
  .flow-pg { height: auto; padding: 0 18px 28px; }
  .flow-col { margin-top: 16px; }
  .ax { height: 516px; }
  .ax-page { padding: 20px 16px; }
  .ax-head .ui-title { font-size: 24px; line-height: 30px; }
  .ax-sub { margin-top: 4px; font-size: 15px; line-height: 20px; }
  .ax-section { margin: 24px 0 8px; font-size: 15px; line-height: 20px; font-weight: 600; }
  .ax-list { border-radius: 12px; }
  .mcx-row-head { column-gap: 12px; grid-template-rows: 20px 20px; row-gap: 0; padding: 12px 16px; }
  .mcx-name, .mcx-meta, .mcx-when { font-size: 15px; line-height: 20px; }
  .mcx-used-long { display: none; }
  .mcx-used-short { display: inline; }
  .mcx-detail-body { padding: 0 16px; }
  .mcx-row.is-open .mcx-detail-body { padding-bottom: 16px; }
  .mcx-calls-t { font-size: 12px; line-height: 16px; }
  .mcx-call { padding: 4px 0; font-size: 13px; line-height: 18px; }
  .mcx-foot { gap: 12px; margin-top: 8px; padding-top: 12px; min-height: 0; }
  .mcx-foot-text { font-size: 13px; line-height: 18px; }
  .mcx-foot .ui-btn { height: 36px; font-size: 15px; }
  /* On a phone, Revoke asks in the confirm sheet, so the foot holds
     only its line and its one button. */
  .mcx-foot [data-foot-ask], .mcx-foot .acts-ask { display: none; }
  .mcx-meta-more, .mcx-call-tool { display: none; }
  .ax-scrim, .ax-sheet { display: block; }
  /* The phone's top bar and tab strip: search and activity beside the
     avatar; the strip scrolled to its selected tab. */
  .ax-bar { height: 52px; gap: 10px; padding: 0 16px; }
  .ax-bar .ui-scope-sep { margin: 0 2px; }
  .ax-bar .ui-scope { font-size: 15px; }
  .ax-bar .ax-ph { display: grid; width: 40px; height: 40px; }
  .ax-bar .ui-scope { margin-right: auto; }
  .ax-bar .ui-avatar { width: 32px; height: 32px; margin-left: 2px; font-size: 14px; }
  .ax-tabs .ax-desk { display: none; }
  .ax-tabs { padding: 0 4px; font-size: 15px; letter-spacing: -0.01em; }

  .cells-4 { grid-template-columns: minmax(0, 1fr); }
  .cells-4 .cell { padding: 24px 0; border-left: 0; }
  .cells-4 .cell + .cell { padding-left: 0; border-top: 1px solid var(--rail); }
  .cells-4 .cell:nth-child(n + 3) { padding-bottom: 24px; }
  .cells-4 .cell:last-child { padding-bottom: 0; }

  .tg-list { gap: 5px; }
  .tg-list span { height: 22px; padding: 0 8px; font-size: 11.5px; }

  /* 30 a gap, as the hero's; at this line height the headline's box
     stands 0.205em above its capitals and 0.359em below its baseline. */
  .cta-title { margin-top: calc(30px - 0.205em); margin-bottom: -0.359em; font-size: 44px; }
  /* Two lines on purpose: one line fits only the widest phones, by a hair. */
  .cta-ln { display: block; }
  .cta-lead { margin-top: 30px; }
  /* The closing button spans the column, as the hero's pair does. */
  .cta-actions { width: 100%; margin-top: 23px; }
  .cta-note { margin-top: 24px; }
  /* The terms first, each a full 44 target, the company under them;
     28 from the rule to the terms' capitals and from the company's
     baseline to the page's end. */
  .footer-inner { flex-direction: column-reverse; align-items: flex-start; gap: 0; padding: 10px var(--pad) calc(23px + env(safe-area-inset-bottom, 0px)); }
  .footer-docs a { display: flex; align-items: center; min-height: 44px; }
}

/* Small tablets: two tiles across leave a transaction row too little
   room for its category, so the tiles stack as on a phone. */
@media (max-width: 760px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
}

/* Phones 390 to 421 wide: two equal halves still fit once the type
   steps to 14 and the Plaid mark to match (its own 126:47.47
   proportions): 171 a half, 1 to spare. Under 390 the pair stacks at
   full size. */
@media (min-width: 390px) and (max-width: 421px) {
  .hero-ctas { grid-template-columns: repeat(auto-fit, minmax(171px, 1fr)); gap: 8px; }
  .hero-ctas .ui-btn { padding: 0 12px; gap: 6px; font-size: 14px; }
  .hero-ctas .cta-plaid .plaid-mark { width: 52.5px; height: 19.78px; }
  .hero-ctas .cta-claude .brand { width: 15px; height: 15px; }
}

/* The smallest phones (320): the transaction tile drops the account
   glyph so each category reads whole. */
@media (max-width: 340px) {
  .vis-txn .ph-acct .ui-glyph { display: none; }
  .vis-txn :is(.ph-name, .ph-cat, .ph-amt .num, .ph-acct) { font-size: 14px; }
}

@media (min-width: 360px) and (max-width: 640px) {
  .h2-keep .h2-ln { display: block; }
}