/* Press pages. Extends styles.css: same tokens, header, section rules, footer, Lufga.
   Grid: the landing page's 1440 frame, 80 px gutters, two columns 411 + 845 with a 24 px gap (1280 content).
   Above 1440 the content stays 1280 and centers; below 1300 gutters are 5vw; at phone width 24 px.
   Type scales with the viewport (clamp) and, on desktop, with viewport height through the landing page's --copy-size / --heading-size. */

/* No grid of its own. styles.css already derives the Figma 12-column system
   (--m margin, --u column, --col4/--col8, --col-gutter); redefining --gutter here gave
   the press pages an 80px margin at 1301 where the homepage has 72.3, so the two
   disagreed at the same window width. --gap aliases the 24px column gutter. */
:root{--gap:var(--col-gutter)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Every press section sits in the gutters; two-column sections use the 411 / 845 split */
.press>section,.press .section-rule,.press-page .site-header{padding-inline:var(--m)}
.g2{display:grid;grid-template-columns:var(--col4) var(--col8);gap:var(--gap);align-items:start}
.press>section{padding-block:clamp(48px,5.5vw,80px)}

/* Type scale, fluid */
.press h1{font-size:clamp(44px,6.25vw,90px);font-weight:300;letter-spacing:-.028em;line-height:1.1}
.press h2{font-size:var(--heading-size,clamp(36px,4vw,58px));font-weight:300;letter-spacing:-.022em;line-height:1.06}
.press-lede,.t-copy{font-size:var(--copy-size,clamp(18px,1.67vw,24px));line-height:1.6;color:var(--body)}
.t-20{font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:var(--body)}
.t-16{font-size:clamp(14px,1.1vw,16px);line-height:1.5}
.press .tag{font-size:clamp(12px,1.1vw,16px)}
.press a.u,.press .u a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule)}
.press a.u:hover,.press .u a:hover{opacity:.55}

/* Hero: title left, lede right */
.press-hero .press-lede{margin:0;max-width:845px}
.press-hero .hero-side{display:flex;flex-direction:column;gap:clamp(24px,2.8vw,40px)}
.crumb{font-size:clamp(14px,1.1vw,16px);color:var(--muted);margin-bottom:clamp(16px,1.7vw,24px)}
.crumb a:hover{opacity:.6}

/* Downloads: two equal cards across the 1280 */
.press-downloads .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.dl{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,32px);border:1px solid var(--rule);border-radius:24px;background:#fff;transition:border-color .2s}
.dl:hover{border-color:var(--ink)}
.dl-title{font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.2}
.dl-desc{font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--body)}
.dl-cta{margin-top:12px;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:100px;background:#fed119;color:var(--ink);font-size:15px;font-weight:500}

/* Updates: date in the 411 column, entry in the 845 */
.updates-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.updates-list li{border-bottom:1px solid var(--rule)}
.updates-list a{display:grid;grid-template-columns:var(--col4) var(--col8);gap:8px var(--gap);padding:clamp(20px,2vw,28px) 0;transition:opacity .2s}
.updates-list a:hover{opacity:.6}
.update-date{color:var(--muted);font-size:clamp(12px,1vw,14px);letter-spacing:.1em;text-transform:uppercase;font-weight:500;line-height:1.6;padding-top:6px;grid-row:1/4}
.update-title{font-size:clamp(18px,1.67vw,24px);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.update-summary{font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--body)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--ink);border-radius:100px;font-size:16px;font-weight:500;line-height:1.2;transition:opacity .2s}
.btn:hover{opacity:.72}
.btn-primary{background:#fed119;border-color:#fed119;color:var(--ink)}

/* Footer: same as the homepage, with the design sizes pinned so they do not shrink with viewport height */
.footer-contact-title{font-size:24px!important;font-weight:400!important;line-height:1.6!important;letter-spacing:0!important}
.footer-main strong{margin-top:48px!important}
.footer-contact{color:#fff;font-size:20px;font-weight:300;letter-spacing:.02em;line-height:1.6;margin-top:8px!important;max-width:850px}
.footer-contact a{color:#fff;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:#777670}
.footer-contact a:hover{opacity:.7}
@media(min-width:901px){
  .press-page .site-footer{min-height:800px;padding:80px var(--m) 28px}
  .press-page .footer-main{min-height:560px}
  .press-page .footer-main h2{font-size:58px}
  .press-page .footer-contact-title{font-size:24px!important}
  .press-page .footer-main>span{font-size:24px}
  .press-page .footer-main strong{font-size:52px}
  .press-page .footer-bottom{min-height:80px;font-size:20px}
  .press-page .footer-contact{font-size:20px}
}
@media(max-width:600px){.footer-contact{font-size:14px}}

/* Article pages: date and crumb in the 411 column, the piece in the 845 */
.article .art-side{position:sticky;top:24px}
.article-date{color:var(--muted);font-size:clamp(12px,1vw,14px);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.article .art-main h1{font-size:clamp(32px,4vw,58px);font-weight:300;letter-spacing:-.022em;line-height:1.1;max-width:20ch}
.article-sub{margin-top:clamp(16px,1.4vw,20px);font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--body)}
.article-body{margin-top:clamp(32px,3.3vw,48px);max-width:66ch}
.article-body p{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--body)}
.article-body p+p{margin-top:24px}
.article-body a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule)}
.article-quote{font-style:italic;padding-inline:clamp(24px,2.8vw,40px)}
.article-body sup{font-size:.7em;color:var(--muted)}
/* The screenshots carry their own device frame and shadow, so they are laid out
   by a shared height rather than forced into a bare 9:19.5 window. */
.article-shots{margin:40px 0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--gap)}
.article-shots img{height:clamp(220px,24vw,340px);width:auto;max-width:100%}
.article-shots figcaption{flex-basis:100%;font-size:15px;color:var(--muted);line-height:1.5}
.article-boiler{padding-top:24px;border-top:1px solid var(--rule);margin-top:40px!important;font-size:17px!important}
.article-boiler+.article-boiler{border-top:0;padding-top:0;margin-top:16px!important}
.article-note{margin-top:32px!important;font-size:14px!important;color:var(--muted)!important}

/* Stack below 900, as the landing page does */
@media(max-width:900px){
  .g2{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
  .press-downloads .cards{grid-template-columns:1fr}
  .updates-list a{grid-template-columns:1fr;gap:6px}
  .update-date{grid-row:auto;padding-top:0}
  .article .art-side{position:static}
}
@media(max-width:600px){
  .press>section{padding-block:40px}
  .article-shots{gap:12px}.article-shots img{height:clamp(200px,52vw,300px)}
}

/* Legal pages (privacy, terms) - long-form text on the press grid */
.legal h2{font-size:clamp(19px,1.7vw,24px);font-weight:600;line-height:1.3;letter-spacing:-.01em;
  margin:48px 0 14px;display:flex;gap:12px;align-items:baseline}
.legal .legal-n{color:var(--muted);font-size:.72em;font-weight:500;font-variant-numeric:tabular-nums;flex:none}
.legal h2:first-child{margin-top:24px}
.legal ul{margin:16px 0;padding-left:20px}
.legal li{font-size:clamp(15px,1.25vw,18px);line-height:1.65;color:var(--body);margin-bottom:10px}
.legal .legal-note{background:var(--tint);border-radius:18px;padding:20px 24px;margin:24px 0}
.legal .legal-note p{margin:0}
.legal-table{margin:20px 0 28px;overflow-x:auto}
.legal-table table{border-collapse:collapse;width:100%;min-width:420px;font-size:clamp(13px,1.05vw,15px)}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--rule);line-height:1.5}
.legal-table th{font-weight:600;color:var(--ink);border-bottom-color:var(--rule-strong);white-space:nowrap}
.legal-table td{color:var(--body)}
.article-body.legal{max-width:74ch}

/* /get: launch notice form (rendered only when FORM_ENDPOINT is set) and the 404 links */
[hidden]{display:none!important}
.notify-form{display:flex;flex-direction:column;gap:16px;max-width:560px}
.notify-row{display:flex;gap:12px;flex-wrap:wrap}
.notify-form input{flex:1 1 240px;min-height:50px;padding:0 20px;border:1px solid var(--ink);border-radius:100px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.notify-form input::placeholder{color:var(--muted)}
.notify-form button{border:1px solid #fed119;cursor:pointer}
.notify-fine,.notify-form [data-form-status]{color:var(--muted)}
.notify-fine a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule)}
.nf-links{display:flex;gap:12px;flex-wrap:wrap}
.get-page .stack{display:flex;flex-direction:column;gap:clamp(16px,1.7vw,24px)}
.updates-empty{padding:clamp(20px,2vw,28px) 0;color:var(--muted);font-size:clamp(16px,1.25vw,18px)}
.update-prerelease,.article-prerelease{color:var(--muted);font-size:clamp(12px,1vw,14px);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.update-prerelease{grid-column:2;margin-top:4px}
@media(max-width:900px){.update-prerelease{grid-column:auto}}
.article-prerelease{margin-top:10px;max-width:22ch;line-height:1.5}
/* Long URLs in the legal text must wrap on phones; grid children must be allowed to shrink. */
.g2>*{min-width:0}
.article-body{overflow-wrap:anywhere}
.article-body h2{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:clamp(28px,3vw,40px) 0 12px}
.article-body h2+p{margin-top:0}
.article-table{width:100%;border-collapse:collapse;margin:32px 0;font-size:clamp(15px,1.2vw,17px);line-height:1.5}
.article-table caption{text-align:left;font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em;padding-bottom:12px}
.article-table th,.article-table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid var(--rule)}
.article-table th{font-weight:500;width:32%;color:var(--ink)}
.article-table td{color:var(--body)}