/* Guides index (Figma web 2026-10 Students, "guides redo (18 Oct)": 1615:20406 at 1440, 1615:20516 at 390).
 *
 * The grad cap right of the title (no panel), the "Start here" chai card with the deal-ticket model (settle and
 * pointer tilt, tilt.js data-tilt, as on How it works), two guide tickets with the shared scalloped stub
 * (site-launch.css --tud-scallop-bulge-right), Quick answers with the sleeping cat in a sticky intro column, and the
 * white scalloped verify band running straight into the footer. Dark mode: company-theme.css plus the end of this file.
 */

/* ---------- hero ---------- */
/* The title starts 148px from the top at 1440 (76 header + 26 + 44 crumbs + 2), as on every page. */
.gd-page .gd-hero { padding-top: 26px; }
.gd-page .gd-hero .ls-crumbs { margin: 0; }
.gd-page .gd-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.gd-page .gd-hero-copy { flex: 0 1 700px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.gd-page .gd-hero h1 { max-width: none; text-wrap: wrap; font-size: 66px; line-height: .98; letter-spacing: -0.045em; }
/* Medium size, centred on the title block, upright and whole. */
.gd-page .gd-hero-art { flex: none; display: block; width: 275px; height: 240px; margin-block: -17px; }
.gd-page .gd-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- all guides ---------- */
.gd-page .gd-all { display: flex; flex-direction: column; gap: 20px; padding-top: 96px; }
.gd-page .gd-all a { color: inherit; text-decoration: none; }
.gd-page .gd-go { display: inline-block; color: var(--ls-accent-text); font-size: 15px; font-weight: 700; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.gd-page .gd-go--ink { color: var(--ls-ink); font-size: 16px; }
.gd-page a:hover .gd-go { text-decoration-thickness: 2.5px; }
.gd-page :is(.gd-lead, .gd-ticket):focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }

/* The "Start here" card: chai, the copy left, the model in a 420 column on the right. */
.gd-page .gd-lead { display: flex; align-items: stretch; overflow: hidden; border-radius: 24px; background: var(--ls-chai); }
.gd-page .gd-lead-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 52px 48px 52px 56px; }
.gd-page .gd-lead-title { text-wrap: wrap; color: var(--ls-ink); font-size: 40px; font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; }
.gd-page .gd-lead-art { flex: none; display: grid; place-items: center; width: 420px; padding: 24px 0; }
.gd-page .gd-model { display: block; width: 300px; line-height: 0; transform-origin: 50% 100%; }
.gd-page .gd-model img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 411; object-fit: contain; -webkit-user-drag: none; }
:root:not([data-theme="dark"]) .gd-page .gd-model-dark, :root[data-theme="dark"] .gd-page .gd-model-light { display: none; }
/* The model answers the hand as on the homepage (tilt.js): an even press and a hold-and-drag shift, flat moves only. */
.gd-page .tud-tilt { position: relative; z-index: 3; display: block; line-height: 0; transform-origin: 50% 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.gd-page .tud-tilt.is-grabbing { cursor: grabbing; }
.gd-page .gd-model.is-before { transform: translateY(20px) scale(.9); }

/* The guide tickets: a tinted stub whose scallops bulge into the white body (the shared homepage edge). */
.gd-page .gd-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gd-page .gd-ticket { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--ls-line-2); border-radius: 18px; background: var(--ls-paper); }
.gd-page .gd-stub { position: relative; flex: none; display: grid; place-items: center; width: 112px; background: var(--ls-tone); }
.gd-page .gd-stub::after { content: ""; position: absolute; top: 0; bottom: 0; right: -6px; width: 6px; background: var(--ls-tone); -webkit-mask: var(--tud-scallop-bulge-right); mask: var(--tud-scallop-bulge-right); }
.gd-page .gd-stub--sand { --ls-tone: var(--ls-sand); }
.gd-page .gd-stub--study { --ls-tone: var(--ls-study); }
.gd-page .gd-stub-art { display: grid; place-items: center; width: 76px; height: 76px; }
.gd-page .gd-stub-art img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.gd-page .gd-ticket-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 24px; }
.gd-page .gd-ticket-title { text-wrap: wrap; color: var(--ls-ink); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* ---------- quick answers ----------
   The questions are the site's own 68 rows (as on Support), so the four closed rows are 276 and the cat is drawn
   157 tall to sleep on the last one: the intro and the list end together, and the intro sticks while open rows grow. */
.gd-page .gd-qa { display: flex; align-items: flex-start; gap: 72px; padding-top: 96px; }
.gd-page .gd-qa-intro { flex: none; width: 420px; display: flex; flex-direction: column; gap: 12px; }
.gd-page .gd-qa-intro h2 { font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.gd-page .gd-qa-art { display: flex; justify-content: center; padding: 20px 0 0; }
.gd-page .gd-qa-art img { display: block; width: 290px; height: 157px; object-fit: contain; }
.gd-page .gd-faq { flex: 1 1 0; min-width: 0; border-top: 0; }
.gd-page .gd-faq details { border-top: 1px solid var(--ls-line-2); border-bottom: 0; }
@media (min-width: 900px) and (min-height: 760px) {
  .gd-page .gd-qa-intro { position: sticky; top: 100px; }
}

/* ---------- the verify band: white, scalloped, straight into the footer ---------- */
/* The page's own bottom padding goes: the band is the last thing before the footer, with no strip of cream between. */
.ls main#main-content.gd-page { padding-bottom: 0; }
.gd-page .gd-band { position: relative; margin-top: 102px; padding: 72px 0 80px; background: var(--ls-paper); }
.gd-page .gd-band::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 12px 6px, var(--ls-paper) 6px, transparent 6.5px) 0 0 / 24px 6px repeat-x; }
.gd-page .gd-band-inner { display: flex; align-items: center; gap: 56px; }
.gd-page .gd-band-art { flex: none; display: grid; place-items: center; width: 240px; height: 240px; }
.gd-page .gd-band-art img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.gd-page .gd-band-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gd-page .gd-band-copy h2 { text-wrap: wrap; font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.gd-page .gd-band-btn { min-height: 52px; margin-top: 8px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .gd-page .gd-lead-art { width: 340px; }
  .gd-page .gd-model { width: 260px; }
  .gd-page .gd-qa { gap: 56px; }
  .gd-page .gd-qa-intro { width: 360px; }
}
@media (max-width: 900px) {
  .gd-page .gd-hero-row { flex-direction: column; align-items: stretch; gap: 20px; }
  .gd-page .gd-hero-copy { flex: none; }
  .gd-page .gd-hero-art { align-self: center; width: 216px; height: 189px; margin: 0; }
  .gd-page .gd-lead { flex-direction: column-reverse; }
  .gd-page .gd-lead-art { width: 100%; height: 208px; padding: 18px 0 0; place-items: end center; }
  .gd-page .gd-model { width: 230px; }
  .gd-page .gd-lead-copy { gap: 14px; padding: 22px 20px 24px; }
  .gd-page .gd-tickets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gd-page .gd-qa { flex-direction: column; align-items: stretch; gap: 20px; }
  .gd-page .gd-qa-intro { width: 100%; }
  .gd-page .gd-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gd-page .gd-band-art { align-self: center; }
}
@media (max-width: 760px) {
  .gd-page .gd-hero { padding-top: 0; }
  .gd-page .gd-hero h1 { font-size: 36px; line-height: .98; letter-spacing: -0.04em; }
  .gd-page .gd-all { padding-top: 56px; }
  .gd-page .gd-lead-title { font-size: 28px; line-height: 1.1; }
  .gd-page .gd-ticket-body { padding: 18px 20px 18px 24px; }
  .gd-page .gd-qa { padding-top: 56px; }
  .gd-page .gd-qa-intro h2, .gd-page .gd-band-copy h2 { font-size: 30px; line-height: 1.12; }
  .gd-page .gd-qa-art { padding: 12px 0 0; }
  .gd-page .gd-qa-art img { width: 232px; height: 200px; }
  .gd-page .gd-band { margin-top: 62px; padding: 44px 0 53px; }
  .gd-page .gd-band-art { width: 150px; height: 150px; }
  .gd-page .gd-band-copy { align-self: stretch; }
  .gd-page .gd-band-btn { width: 100%; }
}
@media (max-width: 374px) {
  .gd-page .gd-hero h1 { font-size: 33px; }
  .gd-page .gd-stub { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .gd-page .gd-model.is-before { transform: none; } }

/* ---------- dark ----------
   Tokens, header and footer come from company-theme.css: the chai card and the stubs take its deep tones, the
   drawings their cream versions, the deal ticket its dark render, the band the dark paper. Nothing else changes. */