/* Intent Research. Intent's day, as on theintent.co: ink on paper sheets over the cream ground, a pale sky at the top.
   Type follows the brand: the Own Hand wordmark, Bree Serif for the headline, DM Sans for everything read. */

@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Bree Serif"; src: url("fonts/BreeSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Intent Own Hand"; src: url("fonts/IntentOwnHand-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Lets the notes fade ease away when they open, where the browser can animate a custom property. */
@property --fade { syntax: "<percentage>"; inherits: false; initial-value: 55%; }

:root {
  /* Day tokens from the shared Intent UI spec (~/intent-private/shared/intent-ui.css), the same ones theintent.co uses. */
  --ground: #eeebe1;
  --sheet: #f9faf7;
  --ink: #202a2e;
  --ink-2: rgba(32, 42, 46, 0.76);
  --ink-3: rgba(32, 42, 46, 0.70);
  --ink-4: rgba(32, 42, 46, 0.42); /* strokes only */
  --hair: rgba(32, 42, 46, 0.14);
  --line: rgba(32, 42, 46, 0.26);
  --human: #2e7550; /* the spec's done green: a Pangram verdict of human */
  --ai: #db4036;    /* the spec's red: a verdict of AI */
  /* Each company's published colour, for its mark and its bar. Intent's is its ink, the colour of the wordmark.
     ChatGPT takes OpenAI's green rather than its black, which would read as Intent's ink. */
  --claude: #d97757;
  --gemini-a: #4796e3;
  --gemini-b: #9177c7;
  --chatgpt: #10a37f;
  --ring: #3f7aa5;
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Bree Serif", Georgia, serif;
  --hand: "Intent Own Hand", "DM Sans", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --settle: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: 80px;
  /* Sheets: flat paper with a hairline edge and a soft fall onto the ground (the spec retired gradients and inset highlights). */
  --panel-bg: var(--sheet);
  --panel-shadow:
    0 0 0 0.5px rgba(32, 42, 46, 0.16),
    0 1px 2px rgba(32, 42, 46, 0.06),
    0 20px 44px -26px rgba(32, 42, 46, 0.30);
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* The home page's sky, held to the top of the page: pale sky fading into the ground. */
  background: linear-gradient(rgba(199, 222, 236, 0.62), rgba(199, 222, 236, 0) 680px) no-repeat, var(--ground); }
::selection { background: #dbe6ef; color: var(--ink); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: calc(1120px + 2 * var(--pad)); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Masthead: the brand's own wordmark. */
.mast { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.brand { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; }
.wordmark { width: 104px; height: 26px; fill: var(--ink); align-self: center; }
.brand span { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); transform: translateY(1px); }
.out { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink-2); transition: color 0.2s ease; }
.out:hover { color: var(--ink); }

/* Who we are, what we work on, the goal. */
.lab { padding: 120px 0 144px; }
.lab h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.05; letter-spacing: -0.032em; font-weight: 400; margin: 0 0 28px; max-width: 18em; text-wrap: balance; }
.lab p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 30em; text-wrap: pretty; }

/* The result. */
.result { padding-bottom: 136px; }
.kicker { font-size: 15px; font-weight: 600; letter-spacing: 0.005em; color: var(--ink-3); margin: 0 0 20px; }
.headline { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; letter-spacing: -0.008em; margin: 0 0 18px; text-wrap: balance; }
/* The proof under the claim: the detector named, the number, the field. */
.proof { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); margin: 0 0 48px; max-width: 36em; text-wrap: pretty; }
/* The hand: one drawn rule in ink under the word the chart is about, the pen theintent.co draws under its calls to action. */
.ruled { position: relative; display: inline-block; }
.hand-rule { position: absolute; left: -3%; width: 106%; bottom: -0.1em; height: 8px; overflow: visible; transition: clip-path 1s cubic-bezier(0.55, 0.05, 0.3, 1); }
.hand-rule path { fill: none; stroke: var(--ink); stroke-opacity: 0.82; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.fig { margin: 0; background: var(--panel-bg); border-radius: 16px; padding: 36px 40px 28px; box-shadow: var(--panel-shadow); }
.note { font-size: 15px; line-height: 1.55; color: var(--ink-3); margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair); max-width: none; }
.note a { color: var(--ink); text-decoration: none; }
.note .dl { font-weight: 600; margin-left: 10px; white-space: nowrap; }
.note a:hover { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.2em; }

/* One column per model: the bar stands on a shared baseline, its exact share above it, the model named below.
   --ph is the plot's height; --top keeps room above the tallest bar for its number. */
.chart { --ph: 380px; --top: 52px; --bw: min(132px, 46%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col { display: flex; flex-direction: column; min-width: 0; }
.plot { position: relative; height: var(--ph); padding-top: var(--top); display: flex; align-items: flex-end; justify-content: center; box-shadow: inset 0 -1.5px 0 var(--line); }
/* --h is the human share, % of texts; --p is the drawn share, 0 to 1: the entrance script moves it, settled it is 1. */
.bar { position: relative; width: var(--bw); height: calc(var(--h) * var(--p, 1) * 1%); border-radius: 7px 7px 0 0; background: var(--ink); }
.col-claude .bar { background: var(--claude); }
.col-gemini .bar { background: linear-gradient(90deg, var(--gemini-a), var(--gemini-b)); }
.col-chatgpt .bar { background: var(--chatgpt); }
.val { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; line-height: 1; white-space: nowrap; transition: opacity 0.5s var(--ease); }
.v-human { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.is-human .v-human { font-size: 34px; letter-spacing: -0.025em; color: var(--ink); }
/* A measured zero: a short cap on the baseline, as wide as every bar, so it never reads as missing. */
.is-zero .bar { height: calc(3px * var(--p, 1)); border-radius: 1.5px 1.5px 0 0; }
.who { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 6px 0; text-align: center; }
.logo { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.logo-intent { width: 22px; height: 26px; }
.logo-claude { fill: var(--claude); }
.logo-gemini { fill: url(#gemini-fill); }
.gemini-a { stop-color: var(--gemini-a); }
.gemini-b { stop-color: var(--gemini-b); }
.logo-chatgpt { fill: var(--chatgpt); }
/* Every mark gets the i's box, so the names under the bars share one line. */
.who .logo { height: 26px; }
.label { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.name { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; }
.model { font-size: 14px; line-height: 1.3; color: var(--ink-3); }

/* Examples: the notes and each model's output, unedited, on the chart's sheet. Intent 1's output leads each card. */
.examples { margin-top: 104px; }
.examples h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.005em; }
.ex-intro p { margin: 0 0 24px; font-size: 16px; color: var(--ink-2); }
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.ex { background: var(--panel-bg); border-radius: 16px; padding: 28px 36px 26px; font-size: 16px; line-height: 1.55; box-shadow: var(--panel-shadow); }
.ex-label { font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin: 0 0 6px; }
.ex-notes { color: var(--ink-2); font-size: 15px; line-height: 1.6; overflow: hidden; }
.ex-notes p { margin: 0; }
.ex-notes p + p { margin-top: 0.6em; }
/* With script, the notes show two lines, the second fading out to the right, until the reader opens them.
   Three mask layers: the first line whole, the second line fading, everything below whole (seen only while opening). */
.js .ex-notes { max-height: 3.2em;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 var(--fade), transparent 96%), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 1.6em, 100% 1.6em, 100% 100%; -webkit-mask-position: 0 0, 0 1.6em, 0 3.2em; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 var(--fade), transparent 96%), linear-gradient(#000, #000);
  mask-size: 100% 1.6em, 100% 1.6em, 100% 100%; mask-position: 0 0, 0 1.6em, 0 3.2em; mask-repeat: no-repeat; }
.js .ex-notes.is-open { -webkit-mask-image: none; mask-image: none; }
.js .ex-notes.is-fading { --fade: 100%; }
.ex-more { display: none; margin: 8px 0 0; padding: 2px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; align-items: center; border-radius: 3px; }
.js .ex-more { display: inline-flex; }
.ex-more::after, .ex-alt summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-2px) rotate(45deg); }
.ex-more[aria-expanded="true"]::after, .ex-alt[open] summary::after { transform: translateY(2px) rotate(225deg); }
.ex-more:hover, .ex-alt summary:hover { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.2em; }
.ex-more[aria-expanded="false"] .when-open, .ex-more[aria-expanded="true"] .when-closed { display: none; }

.ex-out { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair); }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ex-who { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.ex-who .logo { width: 16px; height: 16px; }
.ex-who .logo-intent { height: 19px; }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.tag.is-human::before { background: var(--human); box-shadow: 0 0 0 3px rgba(46, 117, 80, 0.14); }
.tag.is-ai::before { background: var(--ai); box-shadow: 0 0 0 3px rgba(219, 64, 54, 0.12); }
.tag.is-mixed::before { background: linear-gradient(90deg, var(--human) 50%, var(--ai) 50%); }
.ex-text p { margin: 0; }
.ex-text p + p { margin-top: 0.75em; }
/* The hero: Intent 1's words, set larger, in full ink. */
.ex-hero .ex-text { font-size: 18.5px; line-height: 1.62; letter-spacing: -0.003em; color: var(--ink); text-wrap: pretty; }

.ex-alt { margin-top: 22px; }
.ex-alt summary { display: inline-block; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; border-radius: 3px; }
.ex-alt summary::-webkit-details-marker { display: none; }
.ex-alt summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.ex-alt:not([open]) .when-open, .ex-alt[open] .when-closed { display: none; }
/* The comparison sits recessed, a step back from the hero. */
.ex-alt .ex-theirs { margin-top: 14px; padding: 18px 20px 20px; border-top: 0; border-radius: 12px; background-color: var(--ground); box-shadow: inset 0 1px 2px rgba(32, 42, 46, 0.08), inset 0 0 0 0.5px rgba(32, 42, 46, 0.12); }
.ex-theirs .ex-text { font-size: 15.5px; color: var(--ink-2); }
.ex-alt .ex-theirs + .ex-theirs { margin-top: 12px; }
/* The attribution each source's licence asks for. */
.ex-source { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.ex-source a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.18em; }
.ex-source a:hover { color: var(--ink); }

.prose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin: 104px 0 0; padding-top: 40px; border-top: 1px solid var(--hair); }
.prose h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.005em; }
.prose p { margin: 0; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }

.foot { display: flex; justify-content: space-between; padding-top: 24px; padding-bottom: 48px; font-size: 14px; color: var(--ink-3);
  background: linear-gradient(var(--hair), var(--hair)) var(--pad) 0 / calc(100% - 2 * var(--pad)) 1px no-repeat; }

/* Motion, once and calm. The head script sets .motion only when motion is allowed; without it every element is settled. */
@keyframes settle { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .motion:not(.ready) .mast, .motion:not(.ready) .lab h1, .motion:not(.ready) .lab p { opacity: 0; }
  .motion.ready .mast { animation: appear 0.9s ease both; }
  .motion.ready .lab h1 { animation: settle 1.2s var(--settle) 0.05s both; }
  .motion.ready .lab p { animation: settle 1.2s var(--settle) 0.22s both; }
  /* The chart waits for its entrance: bars at the baseline, numbers hidden, the hand rule undrawn. */
  .motion .fig[data-enter]:not(.is-drawn) .bar { --p: 0; }
  .motion .fig[data-enter]:not(.is-drawn) .val { opacity: 0; }
  .motion .result:not(.is-drawn) .hand-rule { clip-path: inset(0 100% 0 0); }
  /* Cards and paragraphs rise once as they reach the reader. */
  .motion [data-rise] { transition: opacity 0.8s ease var(--d, 0s), transform 1.1s var(--settle) var(--d, 0s); }
  .motion [data-rise]:not(.is-in) { opacity: 0; transform: translateY(22px); }
  .motion .ex-alt[open] .ex-theirs { animation: unfold 0.45s var(--settle) both; }
  .motion .ex-notes { transition: max-height 0.55s var(--settle), --fade 0.35s ease; }
  .motion .ex-more::after, .motion .ex-alt summary::after { transition: transform 0.3s var(--ease); }
}

@media (max-width: 900px) {
  :root { --pad: 40px; }
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  .prose { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 600px) {
  :root { --pad: 20px; }
  body { font-size: 17px; }
  .mast { height: 72px; }
  .wordmark { width: 84px; height: 21px; }
  .brand { gap: 9px; }
  .brand span { font-size: 16px; }
  .out { font-size: 14px; }
  .lab { padding: 72px 0 88px; }
  .lab h1 { font-size: 38px; letter-spacing: -0.028em; margin-bottom: 20px; }
  .result { padding-bottom: 96px; }
  .headline { margin-bottom: 14px; }
  .fig { margin: 0 -8px; padding: 24px 12px 18px; border-radius: 14px; }
  .chart { --ph: 260px; --top: 40px; --bw: min(46px, 62%); }
  .bar { border-radius: 5px 5px 0 0; }
  .val { bottom: calc(100% + 8px); }
  .v-human { font-size: 17px; }
  .is-human .v-human { font-size: 23px; }
  .who { gap: 8px; padding: 14px 2px 0; }
  .logo { width: 18px; height: 18px; }
  .logo-intent, .who .logo { height: 21px; }
  .name { font-size: 15px; }
  .model { font-size: 13px; }
  .note { font-size: 14px; margin-top: 20px; padding: 14px 6px 0; }
  .examples { margin-top: 72px; }
  .examples h3 { margin-bottom: 16px; }
  .ex-grid { gap: 18px; }
  .ex { margin: 0 -8px; padding: 22px 18px 20px; border-radius: 14px; }
  .ex-hero .ex-text { font-size: 17.5px; }
  .ex-alt .ex-theirs { padding: 16px 16px 18px; }
  .prose { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 72px; padding-top: 32px; }
  .proof { margin-bottom: 32px; }
  .page-head { padding: 56px 0 40px; }
  .sources { margin-top: 72px; padding: 32px 0 88px; }
  .src-list { font-size: 14px; }
}
.ex { display: flex; flex-direction: column; }
.ex-intro p { max-width: 44em; text-wrap: pretty; }
/* One way to every output: a plain link under the two cards. */
.ex-all-link { margin: 28px 0 0; font-size: 16px; font-weight: 600; }
.ex-all-link a { display: inline-flex; align-items: center; text-decoration: none; }
.ex-all-link a::after { content: ""; width: 6px; height: 6px; margin-left: 10px; border-top: 1.5px solid var(--ink-2); border-right: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.ex-all-link a:hover { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.2em; }
.ex-all-link a:hover::after { transform: translateX(3px) rotate(45deg); }
/* The outputs page: every card, then the full attribution for each source. */
.page-head { padding: 96px 0 56px; }
.page-head .headline { margin-bottom: 18px; }
.page-head p { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 38em; text-wrap: pretty; }
.page-head .back { display: inline-block; margin-bottom: 28px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.page-head .back:hover { color: var(--ink); }
.page-head + .examples { margin-top: 0; }
.sources { margin-top: 96px; padding: 40px 0 120px; border-top: 1px solid var(--hair); }
.sources h2 { font-size: 18px; font-weight: 600; margin: 0 0 16px; letter-spacing: -0.005em; }
.src-list { margin: 0; padding-left: 1.4em; font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 56em; }
.src-list li + li { margin-top: 12px; }
.src-list li:target { color: var(--ink); }
.src-list a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.18em; }
.ex > .ex-alt { margin-top: auto; padding-top: 22px; }