/* Try joomjoo, the home page (the page for agents).
   A hand-written, dependency-free port of the Tailwind v4 build behind trydevin.ai,
   measured in a real browser at 1440 px on 2026-09-28. Every value below is the
   computed value of the original, not a guess. Tokens first, then components. */

/* Fonts, self-hosted. General Sans (Fontshare) for text, IBM Plex Mono (Google) for
   the eyebrow and the button. Latin plus Latin Extended for the mono, like the original. */
@font-face { font-family: "General Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/general-sans-400.woff2) format("woff2"); }
@font-face { font-family: "General Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/general-sans-500.woff2) format("woff2"); }
@font-face { font-family: "General Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/general-sans-600.woff2) format("woff2"); }
@font-face { font-family: "General Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/general-sans-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-400-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-400-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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-500-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-500-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: "IBM Plex Mono Fallback"; src: local(Arial); ascent-override: 76.16%; descent-override: 20.43%; line-gap-override: 0%; size-adjust: 134.59%; }

/* Tokens. Light first, dark below, the original's exact palette. */
:root {
  --font-sans: "General Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
  --container: 72rem;
  --surface: #f1f1f1;
  --border: #dcdcdc;
  --border-strong: #b8b8b8;
  --muted: #eee;
  --muted-dim: #666;
  --background: #fafafa;
  --foreground: #202020;
  --card: #fff;
  --muted-foreground: #5e5e5e;
  --brand: #467bf7;
  --brand-hover: #628ff9;
  --brand-foreground: #121212;
  --ring: #2d60cf;
  --selection: #ddd;
  --shadow-card: 0 1px 2px #22211e0a, 0 4px 12px -2px #22211e0a;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-2xl: 18px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}
.dark {
  --surface: #1a1a1a;
  --border: #333;
  --border-strong: #4a4a4a;
  --muted: #202020;
  --muted-dim: #9b9b9b;
  --background: #121212;
  --foreground: #f2f2f2;
  --card: #161616;
  --muted-foreground: #9b9b9b;
  --brand: #467bf7;
  --brand-hover: #628ff9;
  --brand-foreground: #121212;
  --ring: #467bf7;
  --selection: #383838;
  --shadow-card: 0 0 #0000;
  color-scheme: dark;
}

/* Reset, the slice of Tailwind preflight the page relies on. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { height: 100%; overscroll-behavior: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { min-height: 100%; display: flex; flex-direction: column; overscroll-behavior: none; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
::selection { background: var(--selection); color: var(--foreground); }
a { color: inherit; text-decoration: inherit; }
button { font: inherit; color: inherit; background: transparent; cursor: pointer; appearance: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
h1, p { font-size: inherit; font-weight: inherit; }
[hidden] { display: none; }

/* Skip link. Off canvas until focused. */
.skip { position: fixed; top: 12px; left: 12px; z-index: 50; transform: translateY(-80px); border-radius: 6px; background: var(--foreground); color: var(--background); padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 500; transition: transform .15s var(--ease); }
.skip:focus { transform: translateY(0); }
.skip:focus-visible, .brand:focus-visible, .foot-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }

/* Page shell. The whole page fades in over 300 ms, like the original. */
.shell { animation: enter .3s ease both; --enter-opacity: 0; --enter-y: 0; }
.page { display: flex; flex-direction: column; min-height: 100vh; }

/* Header: sticky, translucent, blurred, 61 px tall. */
.header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--background) 30%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header-inner { margin: 0 auto; display: flex; height: 61px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; max-width: var(--container); }
.brand { display: flex; min-width: 0; align-items: center; gap: 10px; border-radius: 4px; }
.brand-lockup { display: inline-flex; height: 24px; width: 94px; flex-shrink: 0; }
.brand-lockup img { height: 100%; width: 100%; object-fit: contain; object-position: left center; }
.brand-lockup .on-light { display: block; }
.brand-lockup .on-dark { display: none; }
.dark .brand-lockup .on-light { display: none; }
.dark .brand-lockup .on-dark { display: block; }
.account { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }

/* Main: one column, two from 1024 px. */
.main { margin: 0 auto; display: grid; width: 100%; max-width: var(--container); flex: 1 1 0%; }

/* Left: the pitch. Centered until 1024 px, then left aligned. */
.pitch { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 16px; text-align: center; }
.eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }
/* 16 px above the title, not Devin's 24: a lowercase wordmark has no cap line, so the same gap read as a hole. A touch of word space keeps "Try" and "joomjoo" apart under the tight tracking. */
.title { margin-top: 16px; font-family: var(--font-sans); font-size: 48px; line-height: .98; font-weight: 600; letter-spacing: -.03em; word-spacing: .06em; text-wrap: balance; }
.lede { margin-top: 20px; max-width: 28rem; font-size: 15px; line-height: 1.625; color: var(--muted-foreground); }
.actions { margin-top: 32px; display: flex; width: 100%; max-width: 28rem; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

/* The agent pills under the button. One row, the active one lit. */
.envs { margin-top: 14px; display: flex; width: 100%; max-width: 28rem; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.env { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease); }
.env:hover { color: var(--foreground); border-color: var(--border-strong); }
.env.is-active { color: var(--foreground); border-color: var(--foreground); }
.env:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* The one button. Mono, brand blue, dark text, 48 px on phones, 44 px from 640 px. */
.btn { display: inline-flex; height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--brand); color: var(--brand-foreground); padding: 0 18px 0 14px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.btn:hover { background: var(--brand-hover); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; pointer-events: none; }
/* The command button. One fixed width whatever the command, text on the left, the copy icon on the
   right, so a short command and a long one make the same shape. Copies on click, the icon turns
   into a check for a moment. */
.btn.cmd { width: 100%; max-width: 28rem; justify-content: space-between; height: auto; min-height: 48px; padding: 10px 14px 10px 18px; font-size: 14px; }
.btn.cmd code { font: inherit; white-space: nowrap; text-align: left; }
.btn.cmd .icon-check { display: none; }
.btn.cmd.copied .icon-copy { display: none; }
.btn.cmd.copied .icon-check { display: block; }

/* Right: the claim card on a dot grid. Hidden until 1024 px. */
.claim { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1px solid color-mix(in oklab, var(--border) 65%, transparent); padding: 48px 16px; }
.dotgrid { pointer-events: none; position: absolute; inset: 0; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); }
.card { position: relative; display: block; width: 300px; max-width: 100%; border-radius: var(--radius-2xl); background: var(--card); padding: 24px; text-align: center; box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent), var(--shadow-card); transition: box-shadow .15s var(--ease); }
.card:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 20%, transparent), var(--shadow-card); }
.card:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
/* The QR is for a desktop screen; a phone gets a Sign in pill in its place. */
.qr { display: none; border-radius: var(--radius-lg); background: #fff; padding: 12px; }
.qr svg { width: 100%; height: auto; }
.card .sign { width: 100%; }
.card .scan { display: none; }
.card .eyebrow { margin-top: 16px; }
.card-note { margin-top: 6px; font-size: 13px; line-height: 1.5; font-weight: 500; }

/* For agents: off screen, not display:none. A screen reader, a crawler and an agent's page reader all get it;
   a person never sees it. The clip pattern, not opacity or color, so it stays in the accessibility tree. */
.for-agents { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Footer. */
.footer { border-top: 1px solid var(--border); }
.footer-inner { margin: 0 auto; display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; max-width: var(--container); }
.foot-link { display: flex; align-items: center; gap: 8px; border-radius: 4px; color: var(--muted-dim); font-size: 12px; line-height: 16px; font-weight: 500; transition: color .15s var(--ease); }
.foot-link:hover { color: var(--foreground); }
.foot-link.repo { min-width: 0; }
.foot-link.repo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-link.built { flex-shrink: 0; }
/* Right side of the footer: Built with joomjoo | Powered by Visa and Mastercard. */
.foot-left { display: flex; min-width: 0; align-items: center; gap: 8px; }
.foot-right { display: flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--muted-dim); font-size: 12px; line-height: 16px; font-weight: 500; }
.foot-sep { color: var(--border-strong); }
.foot-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.mark { display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url(../images/joomjoo-mark.svg) center / contain no-repeat; mask: url(../images/joomjoo-mark.svg) center / contain no-repeat; transition: transform .3s var(--ease); }
.foot-link.built:hover .mark { transform: rotate(90deg); }

/* Entrance. The four pitch lines rise 8 px and fade in over 500 ms, staggered by 100 ms. */
@keyframes enter { from { opacity: var(--enter-opacity, 1); transform: translate3d(0, var(--enter-y, 0), 0); } }
.in { --enter-opacity: 0; --enter-y: 8px; animation: enter .5s ease both; animation-delay: var(--delay, 0s); }
@media (prefers-reduced-motion: reduce) { .shell, .in { animation: none; } }

/* Breakpoints, the same three as the original: 640, 1024. */
/* Phones and tablets, under 1024 px: the reference, exactly. Eyebrow, title, one line, one blue Sign in
   button, centred in the screen, footer at the bottom. The command, the pills and the QR card are for a
   desk and do not exist here. */
.lede-phone, .sign-phone { display: none; }
@media (max-width: 1023.9px) {
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
  .pitch { padding-top: 24px; padding-bottom: 24px; }
  .lede, .actions, .envs, .claim { display: none; }
  .lede-phone { display: block; }
  .sign-phone { display: inline-flex; margin-top: 32px; }
  /* footer like the reference: Try joomjoo on the left, What is joomjoo? on the right, nothing else */
  .foot-right, .foot-left .foot-sep { display: none; }
  .foot-left { flex: 1 1 100%; justify-content: space-between; }
}
@media (min-width: 640px) {
  .header-inner, .footer-inner { padding-left: 24px; padding-right: 24px; }
  .brand-lockup { height: 28px; width: 109px; }
  .pitch, .claim { padding-left: 24px; padding-right: 24px; }
  .title { font-size: 60px; }
  .btn { height: 44px; }
  .btn.cmd { min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: 15px; }
}
@media (min-width: 1024px) {
  .main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch { align-items: flex-start; padding: 80px 48px 80px 24px; text-align: left; }
  .actions, .envs { justify-content: flex-start; }
  .title { font-size: 72px; }
  .qr { display: block; }
  .card .sign { display: none; }
  .card .scan { display: block; }
  /* The footer mirrors the two columns above it: the link under the pitch, the right group centred under the card. */
  .footer-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-right: 0; }
  .foot-right { justify-self: center; }
  .claim { border-top: 0; border-left: 1px solid color-mix(in oklab, var(--border) 65%, transparent); padding-top: 64px; padding-bottom: 64px; }
}