/* Yieldcraft landing page.
   Layout: 12 columns on gridded paper. One grid cell is one layout column, so every line on the
   page is a layout line, an axis or a boundary between two facts. Ink for text and actions,
   one accent (coral) for links, hover and the measured series in charts. Nothing moves except
   the hero footage. */
:root{
  --ink:#1C1813;
  --paper:#FCF8EB;
  --paper-2:#F3ECD6;
  --white:#FFFDF7;
  --muted:#6A6355;
  --grey:#7A7366;                    /* forecast and de-emphasised marks; 4.4:1 on paper */
  --coral:#E0603B;
  --coral-deep:#B9441F;              /* hover fill; paper text on it is 5.1:1 */
  --rule:rgba(28,24,19,.075);        /* grid lines */
  --rule-strong:rgba(28,24,19,.16);  /* block edges */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.55;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- top block: a size container, so the hero's responsive rules follow its own width ---------- */
.top{position:relative;container-type:inline-size}

/* NAV: wordmark plus a plain descriptor */
.nav{position:absolute;top:0;left:0;right:0;z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.lockup{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.lockup b{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.03em}
.lockup span{font-size:13.5px;color:var(--muted);padding-left:14px;border-left:1px solid var(--rule-strong)}
.nav nav{display:flex;align-items:center;gap:30px}
.nav nav a{font-size:15px;font-weight:500;text-decoration:none}
.nav nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px}

/* BUTTONS: one solid action, one text link */
.btn{display:inline-block;font:600 15px/1 var(--body);padding:15px 22px;border-radius:4px;background:var(--ink);color:var(--paper);text-decoration:none;transition:background .15s}
.btn:hover{background:var(--coral-deep)}
.link{font-weight:600;font-size:15px;text-underline-offset:5px;text-decoration-thickness:1.5px}
.link:hover{color:var(--coral-deep)}

/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);
  --pitch:min(94.3333px, calc((100cqw - 48px) / 12));
}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,transparent calc(50% - .5px),var(--rule) calc(50% - .5px),var(--rule) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(100% - 1px),var(--rule) calc(100% - 1px));
  background-size:var(--pitch) var(--pitch);
  background-position:center top;
}
.hero-top{position:relative;min-height:calc(7 * var(--pitch));display:flex;align-items:center}
.hero-top > .wrap{width:100%}
.hero-copy{position:relative;z-index:2;width:50%;padding:128px 34px 56px 0}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.5cqw,64px);line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.hero p.sub{font-size:clamp(17px,1.35cqw,19px);color:var(--muted);max-width:44ch;margin:26px 0 32px}
.hero-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* FOOTAGE: darken keeps each pixel only where it is darker than the page, so the white sky
   becomes the paper itself and the grid lines show through it. No box, no overlay, no scrim. */
.hero-plate{position:absolute;z-index:1;top:0;bottom:0;left:50%;right:0;
  mix-blend-mode:darken;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18%);
}
.hero-plate img,.hero-plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:90% 100%;display:block}
.hero-plate video{opacity:0}
.hero-plate video.is-playing{opacity:1}

/* STRIP: the three engines in one row, hairline separators on the column lines */
.hero-strip{position:relative;z-index:2;background:var(--paper);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.cell{padding:22px 28px 24px 0}
.cell + .cell{padding-left:28px;border-left:1px solid var(--rule-strong)}
.cell .name{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:5px}
.cell p{font-size:14.5px;color:var(--muted);max-width:34ch}
.hero-source{position:relative;z-index:2;background:var(--paper);font-size:12.5px;color:var(--muted);text-align:right;padding:9px 0 11px}

/* short laptop screens: one grid row less, so the strip stays above the fold */
@media (max-height:800px){ @container (min-width:900px){
  .hero-top{min-height:calc(6 * var(--pitch))}
  .hero-copy{padding:100px 34px 30px 0}
  .hero h1{font-size:clamp(40px,4cqw,56px)}
  .hero p.sub{margin:20px 0 26px}
}}
@container (max-width:899px){
  .hero{--pitch:calc((100cqw - 48px) / 4)}   /* the phone layout has 4 columns, so the grid does too */
  .nav nav a:not(.btn){display:none}
  .lockup span{display:none}
  .hero-top{flex-direction:column;align-items:stretch;min-height:0}
  .hero-top > .wrap{order:1;width:100%}
  .hero-copy{width:auto;padding:112px 0 30px}
  .hero-plate{order:2;position:relative;left:auto;height:62cqw;max-height:420px;-webkit-mask-image:none;mask-image:none}
  .hero-plate img{object-position:78% 100%}
  .hero-strip .wrap{grid-template-columns:1fr}
  .cell{padding:18px 0}
  .cell + .cell{padding-left:0;border-left:0;border-top:1px solid var(--rule-strong)}
  .hero-source{text-align:left}
}

/* ---------- MAIN: the 12 column lines run down the whole page, behind everything ---------- */
main{position:relative;isolation:isolate;background:var(--paper);container-type:inline-size}
.col-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;
  --pitch:min(94.3333px, calc((100cqw - 48px) / 12));
  background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--rule) calc(50% - .5px),var(--rule) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:var(--pitch) 100%;
  background-position:center top;
}
.sec{padding:104px 0 112px;border-bottom:1px solid var(--rule-strong)}
.sec-head{max-width:760px}
.sec h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.3vw,42px);line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.sec-head p{font-size:19px;color:var(--muted);margin-top:22px;max-width:60ch}
.sec-head p + p{margin-top:26px}
.sec h3{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.2;letter-spacing:-.012em;text-wrap:balance;margin-bottom:14px}
.row{display:grid;grid-template-columns:5fr 7fr;align-items:start;margin-top:84px}
.row .txt{padding-right:42px}
.row .txt p{color:var(--muted);margin-bottom:14px;max-width:44ch}
.row .txt p.note{color:var(--ink);font-weight:500;margin:26px 0 10px}
.viz{min-width:0}
.block{margin-top:84px}
.block h3{max-width:30ch}
figcaption,.cap{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:74ch}

/* blocks: opaque, hairline edge, square corners */
.frame{background:var(--white);border:1px solid var(--rule-strong);padding:20px 22px 18px}
.scroll{overflow-x:auto}

/* tables */
table.t{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.45}
table.t th,table.t td{text-align:left;vertical-align:top;padding:10px 16px 10px 0;border-bottom:1px solid var(--rule)}
table.t thead th{font-weight:600;font-size:13px;color:var(--muted);border-bottom:1px solid var(--rule-strong);white-space:nowrap}
table.t tbody tr:last-child th,table.t tbody tr:last-child td{border-bottom:0}
table.t th:last-child,table.t td:last-child{padding-right:0}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.mono{font-family:var(--mono);font-weight:600}
table.t tr.you td{font-weight:600}
.frame table.t{min-width:440px}
.frame table.t td:first-child{white-space:nowrap}
table.t b{font-weight:600}
.frame > .scroll + .scroll,.frame > .hubbox + .scroll{margin-top:14px;border-top:1px solid var(--rule-strong);padding-top:6px}
table.findings{min-width:720px;background:var(--white);border:1px solid var(--rule-strong)}
table.findings th,table.findings td{padding:14px 18px}
table.findings tbody th{font-family:var(--display);font-weight:600;font-size:15.5px;white-space:nowrap}
table.findings td.basis{color:var(--muted);font-size:13.5px;width:26%}
table.findings th:last-child,table.findings td:last-child{padding-right:18px}
table.fleet{min-width:820px;background:var(--white);border:1px solid var(--rule-strong)}
table.fleet th,table.fleet td{padding:10px 18px}
table.fleet th:last-child,table.fleet td:last-child{padding-right:18px}
table.fit{max-width:900px;background:var(--white);border:1px solid var(--rule-strong);margin-top:44px;font-size:16px}
table.fit th,table.fit td{padding:16px 20px}
table.fit th{font-family:var(--display);font-weight:600;white-space:nowrap;width:12em;border-right:1px solid var(--rule)}
table.fit td:last-child{padding-right:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:42px;max-width:900px;margin-top:34px}
.two p{color:var(--muted)}

/* legend: line keys */
.legend{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.5px;margin-bottom:10px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.key{display:inline-block;width:22px;height:0;border-top:2px solid var(--coral)}
.key.g{border-color:var(--grey)}
.key.ink{border-color:var(--ink)}
.key.band{height:10px;border:0;background:rgba(122,115,102,.2)}

/* charts */
.chartbox{position:relative}
.plot{min-width:560px}
.chartbox svg{display:block;width:100%;height:auto;overflow:visible}
svg .g{stroke:rgba(28,24,19,.11);stroke-width:1}
svg .k{stroke:var(--ink);stroke-width:1}
svg .band{fill:var(--grey);fill-opacity:.16}
svg .fc{fill:none;stroke:var(--grey);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg .bk{fill:none;stroke:var(--coral);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg .bkdot{fill:var(--coral);stroke:var(--white);stroke-width:2}
svg .fcdot{fill:var(--grey);stroke:var(--white);stroke-width:2}
svg text.m{fill:var(--muted)}
svg text.i{fill:var(--ink)}
svg text.b{font-weight:600}
svg text.n{font-variant-numeric:tabular-nums}
svg text.halo{paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round}
svg .leg{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
svg .leg.spare{stroke:var(--grey)}
svg .node{fill:var(--ink);stroke:var(--white);stroke-width:2}
svg .leg-hit{stroke:transparent;stroke-width:26;cursor:default}
.hubbox{max-width:430px;margin:0 auto}
.tip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:var(--paper);font-size:13px;line-height:1.45;padding:9px 11px;border-radius:4px;min-width:150px;transform:translate(-50%,-100%)}
.tip[hidden]{display:none}
.tip .row2{display:flex;justify-content:space-between;gap:16px}
.tip .row2 span{opacity:.72}
.tip b{font-weight:600}
details.tv{margin-top:8px;font-size:14px}
details.tv summary{cursor:pointer;color:var(--muted);width:max-content}
details.tv .scroll{margin-top:8px}
details.tv table.t{max-width:520px}

/* fare ladder: classes high to low, continuous prices marked between them */
.ladder{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);min-width:600px;padding-top:62px}
.ladder .marks{position:absolute;left:0;right:0;top:0;height:62px}
.ladder .mark{position:absolute;bottom:0;transform:translateX(-50%);padding-bottom:16px;text-align:center;font-size:12.5px;line-height:1.25;color:var(--muted);white-space:nowrap}
.ladder .mark b{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.ladder .mark::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:12px;background:var(--ink)}
.ladder .cls{padding:11px 0 2px;text-align:center;font:600 16px/1 var(--mono);border-top:1px solid var(--rule-strong)}
.ladder .fare{padding:5px 0 12px;text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--rule-strong)}
.ladder .cls + .cls,.ladder .fare + .fare{border-left:1px solid var(--rule)}
.ladder .on{background:var(--paper-2)}
.ladder .cls.on{box-shadow:inset 0 3px 0 var(--ink)}
.ladder .fare.on{color:var(--ink);font-weight:600}

/* revenue by selling rule: one hue, value at the bar end */
.bars{padding:16px 22px}
.bar-row{display:grid;grid-template-columns:minmax(150px,17em) 1fr 5em;align-items:center;gap:16px;padding:10px 0;font-size:14.5px}
.bar-row + .bar-row{border-top:1px solid var(--rule)}
.bar-track{display:block;height:18px}
.bar-track i{display:block;height:100%;background:var(--coral);border-radius:0 4px 4px 0}
.bar-val{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* one decision as a record */
.record{display:grid;grid-template-columns:6.5em 1fr;border:1px solid var(--rule-strong);background:var(--white);font-size:14px;line-height:1.45;max-width:420px}
.record dt,.record dd{padding:8px 12px;border-bottom:1px solid var(--rule)}
.record dt{color:var(--muted);border-right:1px solid var(--rule)}
.record dt:last-of-type,.record dd:last-of-type{border-bottom:0}
.record b{font-weight:600}

/* closing: the approach lights again, drawn on the page */
.closing{padding-bottom:0;border-bottom:0}
.closing .sec-head p .btn{margin-top:8px}
.plate-wide{position:relative;height:clamp(190px,27vw,400px);margin-top:36px;mix-blend-mode:darken}
.plate-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}

/* FOOTER */
footer{background:var(--ink);color:var(--paper);padding:60px 0 34px}
.foot{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot .lockup b{color:var(--paper)}
.foot p{color:rgba(252,248,235,.66);font-size:14.5px;max-width:44ch;margin-top:14px}
.foot nav{display:flex;flex-direction:column;gap:10px}
.foot nav a{font-size:14.5px;color:rgba(252,248,235,.82);text-decoration:none}
.foot nav a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.fine{margin-top:44px;padding-top:20px;border-top:1px solid rgba(252,248,235,.14);font-size:13px;color:rgba(252,248,235,.6)}

@media (max-width:1020px){
  .row{grid-template-columns:1fr;margin-top:64px}
  .row .txt{padding-right:0;margin-bottom:22px}
  .row .txt p{max-width:60ch}
}
@media (max-width:899px){
  body{font-size:16.5px}
  .sec{padding:72px 0 80px}
  .sec-head p{font-size:17.5px}
  .sec h3{font-size:21px}
  .block{margin-top:64px}
  .frame{padding:16px 16px 14px}
  .two{grid-template-columns:1fr;gap:16px}
  table.fit th{width:auto;white-space:normal}
  main{container-type:inline-size}
  .col-lines{--pitch:calc((100cqw - 48px) / 4)}
  .bar-row{grid-template-columns:1fr 5em;gap:6px 12px}
  .bar-name{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }