.tips-page { overflow: clip; }
.tips-page .tips-hero { padding-block: var(--space-7) var(--space-8); }
.tips-hero__layout { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: var(--space-7); align-items: center; }
.tips-hero__copy, .tips-hero__figure, .tips-frustration__copy, .tips-decision-panel, .tips-retro-design__reading, .tips-retro-design__figure, .tips-platform-panel, .tips-related__grid > article { min-width: 0; }
.tips-hero__copy { width: 100%; }
.tips-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--colour-paper-200); font-size: .875rem; }
.tips-breadcrumb a { color: var(--colour-cyan-400); }
.tips-coordinate { display: inline-flex; margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-2); border: 1px solid var(--colour-cyan-400); color: var(--colour-cyan-400); font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .08em; line-height: 1.34; }
.tips-hero h1 { max-width: 41.25rem; margin-bottom: var(--space-4); }
.tips-hero__standfirst { display: grid; max-width: 41.25rem; gap: var(--space-4); }
.tips-hero__standfirst p { margin: 0; color: var(--colour-paper-50); font-size: 1.125rem; line-height: 1.56; }
.tips-hero__actions { margin-top: var(--space-5); }
.tips-hero__disclosure { display: grid; grid-template-columns: auto minmax(0, 1fr); max-width: 32.5rem; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--colour-paper-200); background: rgba(255,248,232,.08); }
.tips-hero__disclosure span { color: var(--colour-arcade-yellow-400); line-height: 1.625; }
.tips-hero__disclosure p { margin: 0; color: var(--colour-paper-200); font-size: .875rem; line-height: 1.43; }
.tips-hero__figure { width: min(100%, 28.75rem); justify-self: end; margin: 0; }
.tips-hero__figure img, .tips-retro-design__figure img { width: 100%; border: var(--border-dark); border-radius: var(--radius-control); object-fit: cover; }
.tips-hero__figure img { aspect-ratio: 16 / 10; }
.tips-hero__figure figcaption { color: var(--colour-paper-200); }
.tips-first-session__intro { width: min(100%, 42.5rem); }
.tips-route-notes { display: grid; gap: var(--space-5); max-width: 49.5rem; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.tips-route-note { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding-left: var(--space-3); border-left: 1px solid var(--colour-paper-200); }
.tips-route-note__rail { display: grid; align-content: start; gap: var(--space-1); font-family: var(--font-heading); font-weight: 700; }
.tips-route-note__rail span { display: grid; width: 2.5rem; min-height: 2.5rem; place-items: center; background: var(--route-colour); color: var(--colour-midnight-950); }
.tips-route-note__rail b { font-size: .75rem; letter-spacing: .06em; }
.tips-route-note--green { --route-colour: var(--colour-green-400); }.tips-route-note--cyan { --route-colour: var(--colour-cyan-400); }.tips-route-note--yellow { --route-colour: var(--colour-arcade-yellow-400); }.tips-route-note--orange { --route-colour: var(--colour-orange-400); }
.tips-route-note h3 { margin-bottom: var(--space-2); font-size: 1.5rem; }.tips-route-note p { max-width: 35rem; margin-bottom: 0; }
.tips-genres__lead { width: min(100%, 42.5rem); }.tips-genre-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.tips-genre-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 100%; gap: var(--space-3); padding: var(--space-5); border: var(--border-light); background: var(--colour-paper-50); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }.tips-genre-card > * { margin: 0; }.tips-genre-card h3 { font-size: 1.5rem; }.tips-genre-card p { max-width: 19.375rem; }.tips-genre-card a { margin-top: auto; font-weight: 700; }.tips-genre-card:hover { box-shadow: var(--shadow-floating); transform: translateY(-2px); }
.tips-frustration__layout { display: grid; grid-template-columns: minmax(0, 62fr) minmax(18.75rem, 38fr); gap: var(--space-7); align-items: start; }.tips-frustration__copy { width: 100%; max-width: 45rem; }.tips-frustration__copy > article { margin-top: var(--space-6); }.tips-frustration__copy h3 { margin-top: var(--space-3); margin-bottom: var(--space-2); font-size: 1.5rem; }.tips-frustration__copy p { max-width: 38.75rem; }.tips-decision-panel { position: sticky; top: var(--space-5); width: 100%; }.tips-decision-panel__items { display: grid; gap: var(--space-3); }.tips-decision-panel__items > div { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: var(--border-dark); background: rgba(11,18,38,.55); }.tips-decision-panel__items strong { color: var(--colour-arcade-yellow-400); font-family: var(--font-heading); }.tips-decision-panel__items span { color: var(--colour-paper-50); }
.tips-assumptions__lead { width: min(100%, 40.625rem); }.tips-assumption-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }.tips-assumption-card { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding: var(--space-4); border: var(--border-light); background: var(--colour-paper-50); }.tips-assumption-card:nth-child(-n+4) { grid-column: span 3; }.tips-assumption-card:nth-child(5) { grid-column: 2 / span 3; }.tips-assumption-card:nth-child(6) { grid-column: 5 / span 3; }.tips-assumption-card:nth-child(7) { grid-column: 8 / span 3; }.tips-assumption-card__number { color: #4e596d; font-family: var(--font-heading); font-weight: 700; }.tips-assumption-card h3 { margin-block: var(--space-2); font-size: 1.125rem; }.tips-assumption-card p { margin: 0; font-size: .9375rem; line-height: 1.55; }.tips-flag { display: block; width: .75rem; height: .75rem; }.tips-flag--cyan { background: var(--colour-cyan-400); }.tips-flag--orange { background: var(--colour-orange-400); }.tips-flag--yellow { background: var(--colour-arcade-yellow-400); }.tips-flag--green { background: var(--colour-green-400); }.tips-flag--magenta { background: var(--colour-magenta-400); }
.tips-retro-design__layout { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: var(--space-7); align-items: start; }.tips-retro-design__reading { width: 100%; max-width: 45rem; }.tips-retro-design__reading .lead { max-width: 43.75rem; }.tips-design-unit { margin-top: var(--space-6); padding-left: var(--space-4); border-left: 4px solid var(--unit-colour); }.tips-design-unit--cyan { --unit-colour: var(--colour-cyan-400); }.tips-design-unit--orange { --unit-colour: var(--colour-orange-400); }.tips-design-unit--magenta { --unit-colour: var(--colour-magenta-400); }.tips-design-unit h3 { margin-bottom: var(--space-2); font-size: 1.5rem; }.tips-design-unit p { max-width: 43.75rem; }.tips-pull-phrase { margin-bottom: 0; color: var(--colour-midnight-950); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }.tips-context-badge { display: inline-flex; margin-bottom: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--colour-magenta-400); color: var(--colour-white); font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }.tips-context-note { max-width: 35rem; margin-top: var(--space-5); padding: var(--space-4); background: var(--colour-paper-200); }.tips-context-note p { margin: 0; }.tips-retro-design__figure { width: min(100%, 22.5rem); justify-self: end; margin: var(--space-8) 0 0; }.tips-retro-design__figure img { aspect-ratio: 3 / 2; border-color: var(--colour-paper-200); }
.tips-routine h2 { max-width: 44rem; }.tips-waypoints { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }.tips-waypoints::before { position: absolute; z-index: 0; top: 1.25rem; right: 10%; left: 10%; height: 1px; background: var(--colour-midnight-700); content: ""; }.tips-waypoints li { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); min-width: 0; }.tips-waypoint-marker { display: grid; width: 2.5rem; min-height: 2.5rem; place-items: center; color: var(--colour-midnight-950); font-family: var(--font-heading); font-weight: 700; }.tips-waypoint-marker--orange { background: var(--colour-orange-400); }.tips-waypoint-marker--cyan { background: var(--colour-cyan-400); }.tips-waypoint-marker--green { background: var(--colour-green-400); }.tips-waypoint-marker--yellow { background: var(--colour-arcade-yellow-400); }.tips-waypoint-marker--magenta { background: var(--colour-magenta-400); color: var(--colour-white); }.tips-waypoints h3 { margin-bottom: var(--space-2); color: var(--colour-white); font-size: 1.25rem; }.tips-waypoints p { margin: 0; color: var(--colour-paper-50); }.tips-routine__closing { max-width: 38.75rem; margin-top: var(--space-6); margin-bottom: 0; color: var(--colour-paper-200); }
.tips-listing__heading { width: min(100%, 43rem); }.tips-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }.tips-platform-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-5); border: var(--border-light); background: var(--colour-paper-50); }.tips-platform-panel > * { margin: 0; }.tips-platform-panel h3 { font-size: 1.5rem; }.tips-platform-panel p { max-width: 29.375rem; }.tips-platform-panel--android { border-top: 4px solid var(--colour-cyan-400); }.tips-listing-strip { width: 100%; margin-top: var(--space-5); padding: var(--space-5); border-left: 4px solid var(--colour-cyan-400); background: var(--colour-paper-200); }.tips-listing-strip p:last-child { max-width: 47.5rem; margin-bottom: 0; }
.tips-next__panel { padding: clamp(var(--space-5), 6vw, var(--space-8)); }.tips-next__content { display: grid; justify-items: center; width: min(100%, 45rem); gap: var(--space-4); margin-inline: auto; text-align: center; }.tips-next__content > * { margin: 0; }.tips-next__content > p:not(.eyebrow):not(.tips-next__disclosure) { max-width: 38.75rem; color: var(--colour-paper-50); font-size: 1.125rem; line-height: 1.56; }.tips-next__actions { justify-content: center; }.tips-next__disclosure { max-width: 35rem; color: var(--colour-paper-200); font-size: .875rem; line-height: 1.43; }
.tips-related h2 { margin-bottom: var(--space-6); }.tips-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }.tips-related__grid > article { width: 100%; padding-right: var(--space-5); border-right: var(--border-light); }.tips-related__grid > article:last-child { padding-right: 0; border-right: 0; }.tips-related__grid h3 { margin-top: var(--space-3); margin-bottom: var(--space-2); font-size: 1.5rem; }.tips-related__grid p { max-width: 20rem; margin-bottom: 0; }
@media (max-width: 1040px) { .tips-assumption-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tips-assumption-card:nth-child(n) { grid-column: auto; } }
@media (max-width: 980px) { .tips-waypoints { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }.tips-waypoints::before { top: 1.25rem; bottom: 1.25rem; left: 1.25rem; right: auto; width: 1px; height: auto; }.tips-waypoints li { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto; gap: var(--space-4); }.tips-waypoints h3 { margin-top: .25rem; } }
@media (max-width: 940px) { .tips-retro-design__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }.tips-retro-design__figure { width: min(100%, 45rem); justify-self: start; order: -1; margin: 0; }.tips-retro-design__reading { max-width: 45rem; } }
@media (max-width: 920px) { .tips-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }.tips-hero__figure { width: min(100%, 45rem); justify-self: start; }.tips-frustration__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }.tips-decision-panel { position: static; max-width: 45rem; } }
@media (max-width: 860px) { .tips-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tips-genre-card:nth-child(3) { grid-column: 1 / span 2; } }
@media (max-width: 840px) { .tips-related__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }.tips-related__grid > article { padding: 0 0 var(--space-5); border-right: 0; border-bottom: var(--border-light); }.tips-related__grid > article:last-child { padding-bottom: 0; border-bottom: 0; }.tips-related__grid p { max-width: 20rem; } }
@media (max-width: 760px) { .tips-platform-grid { grid-template-columns: minmax(0, 1fr); }.tips-platform-panel { padding: var(--space-4); } }
@media (max-width: 700px) { .tips-page .tips-hero { padding-block: var(--space-6); }.tips-hero h1 { font-size: clamp(2.125rem, 10vw, 2.5rem); }.tips-hero__standfirst p { font-size: 1rem; line-height: 1.625; }.tips-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); }.tips-hero__actions > * { width: 100%; }.tips-route-note { grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); padding-left: var(--space-2); }.tips-route-note__rail span { width: 1.75rem; min-height: 1.75rem; font-size: .75rem; }.tips-route-note__rail b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .625rem; }.tips-genre-grid { grid-template-columns: minmax(0, 1fr); }.tips-genre-card:nth-child(3) { grid-column: auto; }.tips-genre-card { padding: var(--space-4); }.tips-assumption-grid { grid-template-columns: minmax(0, 1fr); }.tips-assumption-card { padding: var(--space-4); }.tips-retro-design__figure { width: 100%; }.tips-next__content { justify-items: start; text-align: left; }.tips-next__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }.tips-next__actions > * { width: 100%; }.tips-listing-strip { padding: var(--space-4); }.tips-waypoints p { font-size: 1rem; line-height: 1.625; } }
@media (max-width: 620px) { .tips-next__actions { grid-template-columns: minmax(0, 1fr); }.tips-next__actions > * { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tips-genre-card:hover { transform: none; } }