/* ===================================================================
   NOODLE PRODUCT PAGE - /apps/noodle
   ===================================================================
   A deliberate brand takeover. The page sits inside the RIPPLES nav and
   footer (dark Nocturne) but the middle belongs to Noodle: shell yellow,
   ink outlines, hard offset shadows, flame buttons.

   Every value here is lifted from the shipped app, not invented:
     shell  #FFD633   .bg-shell
     ink    #1A1308   .bg-ink / .text-ink
     flame  #FF4631   the primary button + accent type
     paper  #FFFEF6   input and card fill
     ember  #C4291A   pressed / deep red
   The fonts are the app's own files, already served from /noodle/.

   EVERYTHING is scoped under .nd so none of it can leak into the rest
   of the site. Do not remove that scoping.
   =================================================================== */

@font-face{
  font-family:"NoodleDisplay";
  src:url("/noodle/assets/assets/fonts/ArchivoBlack.070d925f3e4f6d2fcf9d04767cf6cebf.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NoodleLogo";
  src:url("/noodle/assets/assets/fonts/SauceTM.f29d61f53674c906be5120b092aca8bc.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NoodleText";
  src:url("/noodle/assets/vendor/@expo-google-fonts/hanken-grotesk/400Regular/HankenGrotesk_400Regular.2e544d6119b4e635f6cc5a47800523bb.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NoodleText";
  src:url("/noodle/assets/vendor/@expo-google-fonts/hanken-grotesk/600SemiBold/HankenGrotesk_600SemiBold.b016ff502f15ce9b59c453304c74fb48.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NoodleText";
  src:url("/noodle/assets/vendor/@expo-google-fonts/hanken-grotesk/700Bold/HankenGrotesk_700Bold.14d2af6df606492d846389d2108dae50.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

.nd{
  --shell:#FFD633;
  --ink:#1A1308;
  --flame:#FF4631;
  --flame-soft:#FF5D4A;
  --ember:#C4291A;
  --paper:#FFFEF6;
  --nd-line:3px;
  --nd-pop:6px;
}

/* ---------- shared primitives ---------- */
.nd-band{position:relative;padding:clamp(64px,9vw,120px) 0;overflow:hidden}
.nd-band .wrap{position:relative;z-index:1}
.nd-shell{background:var(--shell);color:var(--ink)}
.nd-ink{background:var(--ink);color:var(--paper)}
.nd-flame{background:var(--flame);color:#fff}

/* The checkerboard from the app's own artwork, rebuilt in CSS so it scales and
   costs nothing. Applied to EVERY band, not opted into per section - Aviv wants
   the texture continuous down the whole page. .nd-checks in the markup is now
   redundant but harmless. */
.nd-band::before,.nd-top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(45deg,rgba(26,19,8,.032) 25%,transparent 25%,transparent 75%,rgba(26,19,8,.032) 75%),
    linear-gradient(45deg,rgba(26,19,8,.032) 25%,transparent 25%,transparent 75%,rgba(26,19,8,.032) 75%);
  background-size:38px 38px;background-position:0 0,19px 19px;
}
.nd-ink.nd-band::before,.nd-top::before{
  background-image:
    linear-gradient(45deg,rgba(241,235,222,.035) 25%,transparent 25%,transparent 75%,rgba(241,235,222,.035) 75%),
    linear-gradient(45deg,rgba(241,235,222,.035) 25%,transparent 25%,transparent 75%,rgba(241,235,222,.035) 75%);
}

.nd h1,.nd h2,.nd h3,.nd .nd-num{font-family:"NoodleDisplay",Impact,sans-serif;font-weight:400;letter-spacing:-.01em;line-height:.98;color:inherit}
.nd p,.nd li,.nd .nd-note{font-family:"NoodleText",system-ui,sans-serif}
.nd .nd-logo{font-family:"NoodleLogo","NoodleDisplay",cursive}

.nd h1{font-size:clamp(2.3rem,4.6vw,3.9rem);margin:0 0 20px;max-width:16ch}
.nd h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:0 0 18px;max-width:20ch}
.nd h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin:0 0 10px}
.nd .nd-em{color:var(--flame)}
.nd-ink .nd-em{color:var(--shell)}
.nd-flame .nd-em{color:var(--shell)}
.nd p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.62;max-width:60ch;margin:0 0 14px}
.nd .nd-lede{font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.6}

/* eyebrow */
.nd-eyebrow{
  display:inline-block;font-family:"NoodleText",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border:var(--nd-line) solid var(--ink);border-radius:999px;
  background:var(--paper);color:var(--ink);margin-bottom:20px;
  box-shadow:3px 3px 0 var(--ink);
}
.nd-ink .nd-eyebrow{background:var(--shell)}
.nd-flame .nd-eyebrow{background:var(--shell);border-color:var(--ink)}

/* ---------- the app's button: outline + hard shadow ---------- */
.nd-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"NoodleText",sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 26px;border:var(--nd-line) solid var(--ink);border-radius:12px;
  background:var(--flame);color:#fff;text-decoration:none;
  box-shadow:var(--nd-pop) var(--nd-pop) 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
.nd-btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.nd-btn:active{transform:translate(var(--nd-pop),var(--nd-pop));box-shadow:0 0 0 var(--ink)}
.nd-btn-2{background:var(--paper);color:var(--ink)}
.nd-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.nd-note{font-size:14px;opacity:.78;margin-top:28px}

/* ---------- cards ---------- */
.nd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.nd-card{
  background:var(--paper);color:var(--ink);
  border:var(--nd-line) solid var(--ink);border-radius:16px;padding:26px 24px 28px;
  box-shadow:var(--nd-pop) var(--nd-pop) 0 var(--ink);
}
.nd-card p{font-size:15px;line-height:1.58;margin:0;color:#3b3325}
.nd-num{font-size:clamp(2.4rem,4vw,3.1rem);color:var(--flame);line-height:1;margin-bottom:12px}
.nd-ink .nd-card{background:var(--shell)}

/* ---------- hero ---------- */
/* The site nav is cream-on-transparent and floats over the page. Straight
   onto Noodle yellow the logo mark all but disappears, so the page opens
   with a short ink strip - which doubles as the seam between our dark site
   and Noodle's takeover. */
.nd-top{position:relative;overflow:hidden;background:var(--ink);padding:clamp(104px,13vh,132px) 0 20px}
.nd-crumbs{font-family:"NoodleText",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#8a8172;display:flex;gap:9px}
.nd-crumbs a{color:var(--shell);text-decoration:none}
.nd-crumbs a:hover{text-decoration:underline}
.nd-hero{padding-top:clamp(48px,6vw,72px);border-top:var(--nd-line) solid var(--ink)}
.nd-hero .nd-logo{
  display:block;font-size:clamp(3.4rem,9vw,6.6rem);line-height:.9;
  color:var(--ink);margin:0 0 6px;
}
.nd-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,58px);align-items:center}

/* framed screenshot of the real app */
.nd-shot{
  border:var(--nd-line) solid var(--ink);border-radius:18px;overflow:hidden;
  box-shadow:10px 10px 0 var(--ink);background:var(--shell);
}
.nd-shot img{display:block;width:100%;height:auto}
.nd-shot-cap{
  font-family:"NoodleText",sans-serif;font-size:13px;font-weight:600;
  padding:11px 15px;border-top:var(--nd-line) solid var(--ink);
  background:var(--paper);color:var(--ink);
}
.nd-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:44px}

/* the seam between our dark site and Noodle's yellow */
.nd-seam{height:0;border-top:var(--nd-line) solid var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nd-hero-grid{grid-template-columns:1fr;gap:36px}
  .nd-grid,.nd-shots{grid-template-columns:1fr;gap:18px}
  .nd{--nd-pop:5px}
}
@media(max-width:560px){
  .nd-btn{width:100%;justify-content:center}
  .nd-actions{gap:13px}
}
@media(prefers-reduced-motion:reduce){
  .nd-btn{transition:none}
}

/* ---------- illustrated Pantry ----------
   NOT a screenshot. A drawing of the interface, rendered in the app's own
   styling, with invented example drops - because the real Pantry today holds
   four test loops from one account and a screenshot of that sells nothing.
   It carries a visible "example" label and must keep it: unlabelled, this
   becomes fake social proof, which is exactly what it must not be. */
.nd-mock{background:var(--paper);border:var(--nd-line) solid var(--ink);border-radius:18px;
  box-shadow:var(--nd-pop) var(--nd-pop) 0 var(--ink);overflow:hidden;max-width:560px}
.nd-mock-top{background:var(--shell);border-bottom:var(--nd-line) solid var(--ink);
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.nd-mock-title{font-family:"NoodleDisplay",Impact,sans-serif;font-size:20px;color:var(--ink)}
.nd-mock-tag{font-family:"NoodleText",sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);border-radius:999px;padding:4px 9px}
.nd-mock-list{padding:12px;display:flex;flex-direction:column;gap:10px}
.nd-row{display:flex;align-items:center;gap:12px;background:var(--paper);
  border:2px solid var(--ink);border-radius:12px;padding:11px 12px}
.nd-row-play{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:var(--flame);
  border:2px solid var(--ink);display:grid;place-items:center}
.nd-row-play::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;
  border-bottom:6px solid transparent;margin-left:2px}
.nd-row-main{min-width:0;flex:1}
.nd-row-t{font-family:"NoodleText",sans-serif;font-weight:700;font-size:14px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-row-m{font-family:"NoodleText",sans-serif;font-size:11.5px;color:#6a5f4a;margin-top:2px}
.nd-row-m b{color:var(--ink);font-weight:700}
.nd-wave{display:flex;align-items:center;gap:2px;height:22px}
.nd-wave i{display:block;width:2px;background:#c9bda4;border-radius:2px}
@media(max-width:900px){.nd-mock{max-width:100%}}

/* ---------- a real phone screen beside its explanation ----------
   Not a device mockup: no bezel, no notch, no fake hardware. The iOS status
   bar is already in the screenshot, which is what makes it read as a phone.
   Just the app's own outline-and-hard-shadow treatment around it. */
.nd-screen{
  max-width:300px;margin:0 auto;
  border:var(--nd-line) solid var(--ink);border-radius:22px;overflow:hidden;
  background:var(--shell);box-shadow:var(--nd-pop) var(--nd-pop) 0 var(--ink);
}
.nd-screen img{display:block;width:100%;height:auto}
.nd-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(38px,4vw,60px);
}
.nd-split.flip .nd-split-copy{order:2}
/* split headings are h3 for document structure (some sit inside a section that
   already has an h2) but they read as section headlines, so they take the h2
   size - they were visibly smaller than every other headline on the page. */
.nd-split h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:16px;max-width:20ch}
.nd-split p{margin:0}
@media(max-width:900px){
  .nd-split{grid-template-columns:1fr;gap:26px}
  .nd-split.flip .nd-split-copy{order:0}
  .nd-screen{max-width:270px}
}

/* ---------- a third tone ----------
   Shell -> ink -> shell -> shell read as one continuous block. Paper breaks
   consecutive yellow bands apart without introducing a new colour: it is the
   app's own card fill. */
/* No third tone. Sections alternate shell / ink straight down the page; the
   colour change is the separation, so the hard rule below is only needed where
   two same-tone bands could ever end up adjacent. */
.nd-band.nd-shell + .nd-band.nd-shell,
.nd-band.nd-ink + .nd-band.nd-ink{border-top:var(--nd-line) solid var(--ink)}

/* splits were floating in empty space - pull them in and give the copy a floor */
.nd-split{align-items:center}
.nd-split .nd-lede{max-width:46ch}
.nd-band.nd-split-band{padding:clamp(52px,6vw,88px) 0}

/* small fact chips under split copy, so the text column has some weight */
.nd-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.nd-chip{font-family:"NoodleText",sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
  border:2px solid var(--ink);background:transparent;color:inherit}
.nd-shell .nd-chip{background:rgba(255,254,246,.55)}
.nd-ink .nd-chip{border-color:var(--shell);color:var(--shell)}

/* ---------- the drafts folder: what the page is arguing against ---------- */
.nd-drafts{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.nd-draft{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:12px;
  border:2px dashed rgba(241,235,222,.28);background:rgba(241,235,222,.04)}
.nd-draft-ic{width:30px;height:30px;flex:0 0 30px;border-radius:7px;
  border:2px solid rgba(241,235,222,.3);display:grid;place-items:center;
  font-family:"NoodleText",sans-serif;font-size:11px;font-weight:700;color:rgba(241,235,222,.45)}
.nd-draft-t{font-family:"NoodleText",sans-serif;font-weight:600;font-size:14.5px;color:rgba(241,235,222,.62)}
.nd-draft-m{font-family:"NoodleText",sans-serif;font-size:12px;color:rgba(241,235,222,.35);margin-top:2px}
.nd-drafts-cap{font-family:"NoodleText",sans-serif;font-size:12.5px;font-style:italic;
  color:rgba(241,235,222,.4);margin-top:16px;text-align:center}

/* .nd-split p{margin:0} had collapsed consecutive paragraphs into one block */
.nd-split p + p{margin-top:15px}

/* ---------- iPhone frame ----------
   The screenshots have their status bar painted out, so the bar here is drawn
   in CSS with generic values - 9:41, full signal, full battery - rather than
   Aviv's own clock and 59% battery. Sizes are in cqw so the bar scales with the
   frame instead of breaking when the column narrows. */
.nd-iphone{
  position:relative;container-type:inline-size;
  /* width:100% is load-bearing: container-type makes the element size
     independently of its contents, so with only margin auto it resolved to an
     intrinsic width of zero and collapsed to a 44px square. */
  width:100%;max-width:300px;margin:0 auto;
  border:var(--nd-line) solid var(--ink);border-radius:26px;overflow:hidden;
  background:var(--shell);box-shadow:var(--nd-pop) var(--nd-pop) 0 var(--ink);
}
.nd-iphone-screen{position:relative;background:var(--shell)}
.nd-iphone-screen img{display:block;width:100%;height:auto}

.nd-status{
  position:absolute;top:0;left:0;right:0;height:6.8%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 7.5%;color:var(--ink);pointer-events:none;
}
.nd-status-time{font-family:"NoodleText",system-ui,sans-serif;font-weight:700;font-size:4.6cqw;letter-spacing:.01em}
.nd-status-ic{display:flex;align-items:center;gap:1.6cqw}
.nd-status-ic svg{display:block;height:3.5cqw;width:auto;fill:currentColor}

/* Dynamic Island */
.nd-island{
  position:absolute;left:50%;transform:translateX(-50%);top:1.3%;
  width:29%;height:4.1%;background:#000;border-radius:999px;
}
@media(max-width:900px){.nd-iphone{max-width:270px}}

/* The App Store listing is not live yet. The button stays so the iOS route is
   visible, but it is a span, not a link - nothing to click, nothing to 404.
   The "soon" tag is the honest half: a button that looks live and does nothing
   reads as a broken site. Swap this back to an <a href> the day it ships. */
.nd-btn-soon{cursor:default;opacity:.62;box-shadow:none;transform:none!important}
.nd-btn-soon small{font-size:10px;letter-spacing:.12em;padding:3px 7px;border-radius:999px;
  background:var(--ink);color:var(--shell);margin-left:2px}

/* ---------- Noodle card on /apps ----------
   The block lives on a dark Nocturne page, so it is deliberately the one warm
   thing there: shell panel, ink outline, hard shadow. Scope it by putting .nd on
   the card itself - that pulls in the tokens, the fonts and the button without
   touching anything else on /apps. */
.nd-appcard{display:block;text-decoration:none;color:var(--ink);
  border:var(--nd-line) solid var(--ink);border-radius:20px;overflow:hidden;
  background:var(--shell);box-shadow:var(--nd-pop) var(--nd-pop) 0 var(--ink);
  transition:transform .14s ease,box-shadow .14s ease}
.nd-appcard:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.nd-appcard > img{display:block;width:100%;height:auto;border-bottom:var(--nd-line) solid var(--ink)}
.nd-appcard-body{position:relative;padding:clamp(26px,3.2vw,42px);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.nd-appcard-body::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(45deg,rgba(26,19,8,.032) 25%,transparent 25%,transparent 75%,rgba(26,19,8,.032) 75%),
    linear-gradient(45deg,rgba(26,19,8,.032) 25%,transparent 25%,transparent 75%,rgba(26,19,8,.032) 75%);
  background-size:38px 38px;background-position:0 0,19px 19px}
.nd-appcard-body > *{position:relative;z-index:1}
.nd-appcard-body p{max-width:64ch;margin:0 0 24px;color:#3b3325}
@media(max-width:560px){.nd-appcard-body .nd-btn{width:100%;justify-content:center}}

/* The old banner was a baked image in washed-out colours on near-black. Rebuilt
   as markup in the app's real palette: shell top with the wordmark, ink body
   under it. Sharp at any size and it moves with the tokens. */
.nd-appcard-hero{position:relative;background:var(--shell);
  border-bottom:var(--nd-line) solid var(--ink);
  padding:clamp(34px,4.4vw,60px) clamp(20px,4vw,48px) clamp(30px,3.8vw,52px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,26px)}
.nd-appcard-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(45deg,rgba(26,19,8,.038) 25%,transparent 25%,transparent 75%,rgba(26,19,8,.038) 75%),
    linear-gradient(45deg,rgba(26,19,8,.038) 25%,transparent 25%,transparent 75%,rgba(26,19,8,.038) 75%);
  background-size:38px 38px;background-position:0 0,19px 19px}
.nd-appcard-hero > *{position:relative;z-index:1}
.nd-appcard-logo{width:clamp(180px,26vw,300px);height:auto;display:block}
.nd .nd-appcard-tag{font-family:"NoodleDisplay",Impact,sans-serif;line-height:1.04;
  font-size:clamp(1.4rem,3.2vw,2.6rem);color:var(--ink);margin:0;max-width:17ch}
.nd-appcard .nd-appcard-body{background:var(--ink);color:var(--paper)}
.nd-appcard .nd-appcard-body p{color:#cfc7b6}
.nd-appcard .nd-appcard-body::before{
  background-image:
    linear-gradient(45deg,rgba(241,235,222,.035) 25%,transparent 25%,transparent 75%,rgba(241,235,222,.035) 75%),
    linear-gradient(45deg,rgba(241,235,222,.035) 25%,transparent 25%,transparent 75%,rgba(241,235,222,.035) 75%)}
.nd-appcard .nd-appcard-body .nd-eyebrow{background:var(--shell)}