/* Desktop layout, 64rem (1024px) and wider. Loaded by lib/page.mjs with media="(min-width:64rem)", after journey.css and
   orders.css, so phones never read a line of it. Layout only: tokens, recipes and motion stay in mobile-tokens.css and
   journey.css. Why each rule is here: design/DESKTOP-2026-09-24.md (the principles, each with a competitor screenshot). */

/* ---------- the bar: wordmark, the three places, My videos. Same on every page, like every reference. ---------- */
.journey-nav,html[data-page=effect] .journey-nav{position:relative;inset:auto;display:flex;align-items:center;gap:28px;width:min(100% - 96px,1184px);height:68px;margin:0 auto;padding:0;background:none}
.journey-nav .nav-back,.journey-nav .nav-title{display:none}
.journey-nav.has-sides{height:68px}
.journey-nav .brand{padding:0;min-height:44px}.journey-nav .brand img{height:28px}
.desk-brand{display:flex}
.desk-nav{display:flex;align-items:center;gap:4px}
.desk-nav a{display:flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--radius-pill);color:var(--muted);font-size:.9375rem;font-weight:700;letter-spacing:-.005em;transition:color var(--dur-hover) var(--ease-press),background var(--dur-hover) var(--ease-press)}
.desk-nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.desk-nav a[aria-current]{color:var(--ink);background:var(--grad-raised);box-shadow:var(--hi),var(--ring)}
.journey-nav .journey-library,html:not([data-page=home]) .journey-library,html[data-page=effect] .journey-library{margin-left:auto;width:auto;min-height:40px;padding:0 14px 0 11px;border-radius:var(--radius-pill);background:var(--grad-raised);box-shadow:var(--btn-secondary);-webkit-backdrop-filter:none;backdrop-filter:none}
html:not([data-page=home]) .library-label{display:inline}
html:not([data-page=home]) .journey-library [data-video-count]{position:static;box-shadow:0 2px 6px -2px rgba(255,110,60,.8)}

/* ---------- the effects front door: the lead effect at full height on the left, the line and the photo-in pairs on the
   right, the other effects in one row under it (design/EFFECTS-FRONT-DOOR-2026-09-25.md) ---------- */
.browse-page{max-width:1280px;padding:4px 48px 72px}
.fx-page{--lead-h:max(min(calc(100svh - 68px - 32px),720px),520px);display:grid;grid-template-columns:calc(var(--lead-h) * 9 / 16) minmax(0,1fr);grid-template-rows:auto auto;column-gap:64px;align-content:start}
.fx-page>*{grid-column:1/-1;min-width:0}
.fx-page>.fx-intro{grid-column:2;grid-row:1;align-self:end;padding:0 0 28px}
.fx-intro h1{font-size:var(--text-desktop);max-width:12ch}
.fx-intro>p:not(.fx-price,.fx-status){font-size:1.125rem;max-width:40ch;margin-top:14px}
.fx-page>.fx-top{display:contents}
.fx-top>.effect-card{grid-column:1;grid-row:1/span 2;height:var(--lead-h);margin-top:8px}
.fx-top>.effect-card .film-cover{aspect-ratio:auto;height:100%}
.fx-top>.fx-pairs{grid-column:2;grid-row:2;align-self:start}
.fx-pair-row{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));margin:16px 0 0;padding:0;overflow:visible}
.fx-pair-name{font-size:.75rem}
.fx-more{margin-top:56px}
.fx-more .effect-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.fx-more .effect-card .film-cover{aspect-ratio:4/5}
/* Words on footage: the scrim reaches higher on the taller desktop tiles, so the name and line sit on dark, not brickwork. */
.effect-grid .effect-card .film-cover::after{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 34%,rgba(0,0,0,.28) 58%,rgba(0,0,0,0) 76%)}
.effect-grid .effect-card .film-caption p{color:rgba(245,245,243,.92);min-height:calc(2 * 1.35em)}
.effect-grid .film-cta{min-height:40px;margin-top:8px;font-size:.875rem}
.fx-plate{grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:48px;padding:28px 32px}
.fx-plate p{grid-column:3;grid-row:1}.fx-plate p+p{grid-row:2;margin-top:0}.fx-plate div{grid-row:1/span 2}

/* ---------- effect page: the example on the left, everything needed to decide on the right, all above the fold ---------- */
.studio-flow.is-discovering{--stage-h:max(min(calc(100svh - 68px - 56px),800px),460px);width:min(100% - 96px,1184px);display:grid;grid-template-columns:calc(var(--stage-h) * 9 / 16) 500px;grid-template-rows:auto 1fr;justify-content:center;column-gap:64px;row-gap:20px;align-items:start;padding:8px 0 48px}
/* The stage's size is known before the poster arrives (height, then 9:16), so the two columns never move on load. */
.is-discovering>.cinema-stage{grid-column:1;grid-row:1/span 3;justify-self:end;height:var(--stage-h);width:calc(var(--stage-h) * 9 / 16);min-height:0}
.is-discovering>.effect-panel{grid-column:2;grid-row:1/span 3;align-self:center;gap:22px}
.is-discovering .release-notice{padding:14px 16px}
.is-discovering>.journey-error{grid-column:2}
.effect-story h1{font-size:3rem}
.is-discovering .flow-action{margin-top:4px}
/* More effects under the fold: the Higgsfield effect page keeps its catalog one scroll away. Small 9:16 cards, names under. */
.is-discovering>.more-effects{grid-column:1/-1;grid-row:4;justify-self:center;width:min(100vw - 96px,1184px);display:flex;flex-direction:column;gap:16px;margin-top:40px;padding-top:32px;box-shadow:inset 0 1px 0 var(--line)}
.more-effects h2{font-size:1.375rem;letter-spacing:var(--track-title)}
.more-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.more-card{display:flex;flex-direction:column;gap:10px;color:var(--ink);font-size:.9375rem;font-weight:700}
.more-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-media);background:var(--media-bg);box-shadow:var(--ring-media),var(--elev-2);transition:transform var(--dur-hover) var(--ease-press)}
.more-card:hover img{transform:translateY(-2px)}

/* ---------- make page: the same two columns and the same bar ---------- */
.studio-flow.is-making{width:min(100% - 96px,1040px)}

/* ---------- the $97 page: the offer and the order form side by side, then what you get ---------- */
.ads-page{max-width:1280px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;column-gap:40px;row-gap:64px;padding:32px 48px 88px}
.ads-page>*{grid-column:1/-1;min-width:0}
.ads-page>.ads-hero{grid-column:1/7;grid-row:1;align-self:center;padding-top:0}
.ads-page>.ads-form{grid-column:7/13;grid-row:1;align-self:start}
.ads-page>.journey-error,.ads-page>.ads-note{grid-column:1/7;align-self:start}
.ads-hero h1{font-size:3rem;line-height:1}
/* The legal pages are reading pages: one column at a reading width, not the $97 page's grid. */
.ads-page.legal{display:flex;max-width:760px;row-gap:0;padding:40px 48px 88px}.ads-page.legal>.ads-hero{align-self:stretch}
.ads-hero .journey-primary{align-self:flex-start;width:auto;min-width:280px}
.ads-page>.ads-included{grid-column:span 4;padding:24px;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1);align-self:stretch}
.ads-form+.ads-included{grid-column:1/-1;padding:28px 32px}
.ads-form+.ads-included ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px}
.ads-form+.ads-included~.ads-included{grid-column:span 6}
.ads-page>.ads-form{padding:28px 32px}
.ads-page>.ads-full{grid-column:3/11;padding:32px 36px}
.ads-page>.ads-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.ads-faq>h2{grid-column:1/-1;padding-bottom:12px}

/* ---------- pricing: the things we sell side by side, the price as the biggest thing on each card ---------- */
.plain-page{width:100%;max-width:1040px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px;padding:40px 48px 72px}
.plain-page>.head{grid-column:1/-1;padding-bottom:8px}
.plain-page>.card{height:100%;display:flex;flex-direction:column;padding:28px}
.plain-page>.card>.buttons,.plain-page>.card>.btn{margin-top:auto}

/* One thing on sale: one wide card, the price and the button on the left, what you get on the right. */
.plain-page>.card.is-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start;padding:36px 40px}
.plain-page>.card.is-wide>*{grid-column:1}
.plain-page>.card.is-wide>.offer-list{grid-column:2;grid-row:1/span 4;align-self:center;margin:0;padding:24px 28px;border-radius:var(--radius-control);background:var(--bg-deep);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 0 1px var(--line)}
.plain-page>.offer-samples{grid-column:1/-1;margin-top:24px}.plain-page>.offer-samples>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.plain-page>.offer-samples img{aspect-ratio:3/4}
.plain-page>.card.is-wide>.btn{justify-self:start;width:auto;min-width:240px;margin-top:22px}

/* A computer has no home screen to add Cracked to. */
.install-help{display:none}

/* ---------- library and result: the same page width as everything else ---------- */
.library-page{max-width:1280px;padding:4px 48px 72px}
.plain-page>.card>h2{font-size:1.375rem}