/* Go Plugins.
   One idea: paper, ink, and the work. The images and videos carry the colour; the one gradient on the
   page is the copper "Go" of the name. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    src: url(../fonts/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: block;
    src: url(../fonts/inter-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --paper: #f3ecdc;
    --ink: #161513;
    --muted: #6b675e;
    --line: rgba(22, 21, 19, 0.14);

    --max: 1240px;
    --pad: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--paper);
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
main { flex: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible, [role="slider"]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}


/* NOTHING BUT PROSE IS SELECTABLE. Dragging across a card painted the wordmark and its labels blue, which reads as a page half built; on the
   before/after slider it selected the whole section. What a visitor may actually want to copy - an answer, a price, our address - keeps its
   selection, and so does anything they can type into. */
body { -webkit-user-select: none; user-select: none; }
.lead, .small { -webkit-user-select: text; user-select: text; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Type ---------- */
h1 {
    font-weight: 500;
    font-size: clamp(2.7rem, 7.2vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
h2 {
    font-weight: 500;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
h3 { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 34ch; }
.small { font-size: 14px; color: var(--muted); }

/* THE "GO": the same copper as the word "Davinci Resolve" on the Go Atlas page, drawn as a soft
   three-stop gradient. It is the one coloured thing in the name, so the eye lands on it first. */
.go-mark {
    background: linear-gradient(135deg, #a9502a 0%, #cf7448 48%, #e3a35c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-right: 0.02em;
}

/* ---------- Hub: three plugins, centred, all above the fold ---------- */
/* One axis. The name, its line and the three cards share the centre of the page, and the cards sit on
   a grid whose margins are the header's, so nothing hangs off the edge of anything else. */
.hub { background: radial-gradient(ellipse 75% 46% at 50% 0%, #faf5e9 0%, var(--paper) 74%), var(--paper); }
/* On a tall screen the composition is centred between the header and the footer, not left hanging from the top. */
/* VERTICAL RHYTHM: three spaces and only three - above the name, between the name and the cards, below the cards.
   The outer two are equal because the block is centred between the header and the footer, and it is lifted a
   little (more room below than above), since a block sitting on the exact middle looks low. The space between
   is the smaller one: the name and its three products read as a single thing. */
.hub main { display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 3vh, 40px) 0 clamp(28px, 6vh, 72px); }
.hub .hero { padding: 0 0 clamp(36px, 8.5vh, 104px); }
.hero-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(6px, 1vh, 12px); }
/* THE NAME IS SET LIKE THE GO ATLAS TITLE: Inter, weight 800, no tracking. */
.hero-stack h1 { font-size: clamp(2.6rem, min(6.4vw, 10vh), 6rem); font-weight: 800; letter-spacing: 0; line-height: 1.02; max-width: none; }
/* OPTICAL CENTRING. The name is geometrically centred, but the copper "Go" is lighter than the black word after it, so
   the visual weight sat about a third of an em to the right (measured: +27 px at 1440 px). A shift of 0.12em is the compromise: the weight is about halfway back to the middle, and the word does not look pushed left. */
.hero-stack h1 { transform: translateX(-0.12em); }
.hero-sub { display: inline-flex; align-items: center; gap: 0.55em; font-size: clamp(0.85rem, min(1.1vw, 2.2vh), 1.05rem); font-weight: 500; color: var(--muted); }
.hero-sub-logo { width: 1.05em; height: 1.05em; }

.lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); }
.piece a { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 20px); text-align: center; }
.piece-media {
    width: 100%;
    overflow: hidden;
    /* The dark grey of the Go Atlas price cards. The demo clips are light on black, so they are laid on it with
       Screen: black becomes this grey, white stays white, and a glow keeps adding light instead of being clipped. */
    background: linear-gradient(180deg, rgba(233, 221, 200, 0.045), rgba(233, 221, 200, 0.012) 42%, transparent 100%), #222220;
    isolation: isolate;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(22, 21, 19, 0.08), 0 22px 44px -22px rgba(22, 21, 19, 0.45);
    transition: filter 0.3s ease;
}
/* THE CARDS DO NOT MOVE OR GROW UNDER THE POINTER. Arriving here from another page leaves the pointer over one of them, and a moment
   after load that card rose and swelled while its neighbours stayed put. The card lightens instead. */
.piece a[href]:hover .piece-media { filter: brightness(1.12); }
.piece-media img, .piece-media video { mix-blend-mode: screen; }
.piece-media img, .piece-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.piece h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: 0; }
/* WHICH PAGES OF RESOLVE THE PLUGIN WORKS ON, in Resolve's own glyphs (the very icons of its page bar, from the plugin's compatibility
   screen): a cut editor recognises them at a glance, and the words under them leave nothing to guess. */
.piece-pages {
    display: flex;
    justify-content: center;
    gap: 22px;
    /* NOTHING ABOVE THEM BUT THE PICTURE. The two lines that used to sit between the two were already said on the product page (the owner,
       2026-09-26), so the hairline that separated them is gone too; the flex gap of the card is the whole of the space. */
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
.piece-pages li { display: inline-flex; align-items: center; gap: 6px; }
.piece-pages img { display: block; width: 17px; height: 17px; opacity: 0.9; }
/* "SOON AVAILABLE" IS LAID OVER THE PICTURE of a product that cannot be bought yet, under a dark veil: the demonstration keeps
   playing, but nothing on the card can be mistaken for an offer. It sits inside .piece-media, above the video in the same stacking
   context (isolation), so the screen blend of the video does not touch it. */
.piece-media { position: relative; }
.piece .piece-media .piece-soon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    max-width: none;
    background: rgba(22, 21, 19, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #f3ecdc;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
}
/* A large screen gets larger cards instead of wider margins. */
@media (min-width: 1600px) and (min-height: 900px) {
    .hub .wrap { max-width: 1480px; }
}
/* FOUR CARDS: side by side while they stay readable, two by two on a tablet, one under the other on a phone. */
@media (max-width: 1100px) {
    .lineup { grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .lineup { grid-template-columns: 1fr; gap: 40px; max-width: 560px; margin: 0 auto; }
}