/* Wrenly x Fieldhouse - app build proposal deck. Shared chrome + components.
   Each page is a fixed 850x1100 document, no scroll. Print-safe:
   NO box-shadow / drop-shadow (banding), NO gradient text (hairline-box leak).
   Solid fills + hairline borders + flat gradients only. */

:root{
  --paper:#F5F1EA;
  --paper2:#EDE6DA;
  --ink:#17263E;        /* deep navy */
  --ink2:#4A566E;
  --teal:#2E7D96;       /* primary accent (the "green") */
  --teal-d:#245E71;
  --clay:#B65B36;       /* terracotta label accent (the "brass") */
  --line:#DBD3C4;
  --line2:#B7AD9A;
  --font-display:"Instrument Serif",Georgia,serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:850px;height:1100px;overflow:hidden;background:var(--paper)}
body{color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision}

.page{position:relative;z-index:0;width:850px;height:1100px;padding:58px 68px 54px;overflow:hidden;
  background:radial-gradient(120% 90% at 88% -12%, #E8EFEE 0%, rgba(232,239,238,0) 52%),
    linear-gradient(168deg,#FAF7F0 0%,var(--paper) 55%,#EFE9DD 100%)}
/* faint wren watermark, top-right */
.page::after{content:"";position:absolute;z-index:-1;right:-120px;top:-96px;width:440px;height:440px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="%232E7D96" fill-opacity="0.05"><path d="M18 40 C13 33 12 26 15.5 21.5 C18 25 19.5 31 21.5 37 Z"/><path d="M20 41 C18 30 25 22 34 22 C43 22 48.5 29 47.5 37 C46.8 42.6 41.5 46 34.5 46 C27.5 46 21 45 20 41 Z"/><circle cx="42.5" cy="24.5" r="7.6"/></g></svg>') no-repeat center/contain}

.serif{font-family:var(--font-display);font-weight:400;font-synthesis:none}

/* corner ticks */
.tick{position:absolute;width:13px;height:13px;border:1px solid var(--line2);z-index:5}
.t1{left:28px;top:28px;border-right:0;border-bottom:0}
.t2{right:28px;top:28px;border-left:0;border-bottom:0}
.t3{left:28px;bottom:28px;border-right:0;border-top:0}
.t4{right:28px;bottom:28px;border-left:0;border-top:0}

/* top chrome */
.chrome{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-ui);
  font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);
  position:relative;z-index:2}
.chrome .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--clay);
  vertical-align:middle;margin:0 8px 2px}
.rule{height:1px;background:var(--line);margin:15px 0 0;position:relative;z-index:2}

/* footer */
.foot{position:absolute;left:68px;right:68px;bottom:44px;z-index:5}
.foot .fr{height:1px;background:var(--line);margin-bottom:11px}
.foot .row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-ui);
  font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}

/* type */
.kicker{font-family:var(--font-ui);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--clay)}
h1{font-family:var(--font-display);font-weight:400;font-size:76px;line-height:.98;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--teal)}
.hl{font-family:var(--font-display);font-weight:400;font-size:48px;line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.hl em{font-style:italic;color:var(--teal)}
.lede{font-size:15px;line-height:1.5;color:var(--ink2);max-width:610px}
.body{font-size:13px;line-height:1.46;color:var(--ink2)}
.wrap{position:relative;z-index:2}
.head{position:relative;z-index:2}
.dark-lab{font-family:var(--font-ui);font-weight:600;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink2)}

/* stat tiles */
.stats{display:flex;gap:14px}
.stat{flex:1;border:1px solid var(--line);border-radius:10px;padding:16px 15px;background:var(--paper2)}
.stat .num{font-family:var(--font-display);font-size:40px;line-height:1;color:var(--teal);letter-spacing:-.01em}
.stat .cap{font-size:11.5px;line-height:1.35;color:var(--ink2);margin-top:9px}

/* pillars (3-up) */
.pillars{display:flex;gap:26px}
.pillar{flex:1}
.pillar .pi{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.pillar .pi svg{width:20px;height:20px}
.pillar .ph{font-size:17px;color:var(--ink);font-weight:600;margin-bottom:6px}
.pillar .pb{font-size:12px;line-height:1.45;color:var(--ink2)}

/* four-phase rows */
.phase{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.phase .pn{font-family:var(--font-display);font-size:30px;color:var(--clay);width:30px;flex:0 0 30px;line-height:1}
.phase .pmid{width:210px;flex:0 0 210px}
.phase .ptt{font-size:18px;color:var(--ink);font-weight:600;line-height:1.15}
.phase .ptag{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-top:7px;display:inline-block}
.phase .ptag.live{color:var(--teal)}
.phase .ptag.buf{color:var(--clay)}
.phase .pdesc{font-size:12.5px;color:var(--ink2);line-height:1.46;flex:1}

/* definition list */
.dl .sec{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin:0 0 4px}
.dl .di{padding:8px 0;border-top:1px solid var(--line)}
.dl .dt{font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.2}
.dl .dd{font-size:11.5px;color:var(--ink2);line-height:1.4;margin-top:2px}

/* receive grid */
.recv{display:flex;gap:38px}
.recv .rcol{flex:1}
.recv .ri{display:flex;gap:13px;padding:11px 0;border-top:1px solid var(--line)}
.recv .rn{font-family:var(--font-display);font-size:15px;color:var(--teal);width:22px;flex:0 0 22px;padding-top:1px}
.recv .rt{font-size:14px;color:var(--ink);font-weight:600;line-height:1.18}
.recv .rd{font-size:11px;color:var(--ink2);margin-top:3px;line-height:1.35}

/* milestone strip */
.miles{display:flex;gap:0;position:relative}
.miles::before{content:"";position:absolute;left:6px;right:34px;top:6px;height:1px;background:var(--line)}
.mile{flex:1;padding-right:18px;position:relative}
.mile::before{content:"";position:absolute;left:0;top:1px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--clay)}
.mile.last::before{background:var(--clay)}
.mile .md{font-family:var(--font-display);font-size:30px;color:var(--ink);letter-spacing:-.01em;margin-top:24px;line-height:1}
.mile .mt{font-size:12.5px;color:var(--ink);font-weight:600;margin-top:9px}
.mile .ms{font-size:11px;color:var(--ink2);line-height:1.35;margin-top:3px}

/* week-by-week */
.wbw .wr{display:flex;gap:16px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.wbw .wk{font-size:12px;color:var(--ink);font-weight:600;width:120px;flex:0 0 120px}
.wbw .wx{font-size:12px;color:var(--ink2);line-height:1.4;flex:1}
.wbw .wr.launch .wk{color:var(--teal)}

/* pricing hero (dark) */
.pricehero{background:linear-gradient(160deg,#1B3A4A 0%,#132A38 100%);border-radius:16px;
  padding:26px 30px;display:flex;gap:28px;color:#DCE9ED}
.pricehero .ph-lab{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8FBCCB}
.pricehero .ph-h{font-family:var(--font-display);font-size:30px;color:#fff;line-height:1.04;margin:8px 0 16px}
.pricehero .ph-list{display:flex;gap:18px}
.pricehero .ph-list ul{list-style:none}
.pricehero .ph-list li{font-size:10.5px;line-height:1.85;color:#CBE0E6;position:relative;padding-left:12px;white-space:nowrap}
.pricehero .ph-list li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--teal)}
.pricehero .ph-r{flex:0 0 210px;border-left:1px solid #2E5261;padding-left:26px}
.pricehero .ph-num{font-family:var(--font-display);font-size:58px;color:#fff;letter-spacing:-.01em;line-height:1;margin:4px 0}
.pricehero .ph-sub{font-size:11.5px;color:#8FBCCB}
.pricehero .ph-dates{margin-top:16px;padding-top:16px;border-top:1px solid #2E5261;font-size:11.5px;line-height:1.7;color:#CBE0E6}

/* payment split */
.split{display:flex;background:#EAF2F1;border:1px solid #CADFDD;border-radius:14px;margin-top:16px}
.split .sp{flex:1;padding:18px 14px;text-align:center;border-left:1px solid #D4E4E2}
.split .sp:first-child{border-left:0}
.split .sp .spn{font-family:var(--font-display);font-size:34px;color:var(--ink);letter-spacing:-.01em}
.split .sp .spc{font-size:11px;color:var(--ink2);margin-top:5px}

/* retainer tiers */
.row3{display:flex;gap:12px}
.tier{border:1px solid var(--line);border-radius:14px;padding:16px 17px;background:#FFFFFF;flex:1;display:flex;flex-direction:column}
.tier.rec{border:1.5px solid var(--teal);background:#F1F7F8}
.tier .tname{font-size:16px;color:var(--ink);font-weight:600;line-height:1.1}
.tier .price{font-family:var(--font-display);font-size:30px;color:var(--ink);margin:8px 0 2px}
.tier .price span{font-family:var(--font-ui);font-size:13px;color:#89A6AF}
.tier .rec-tag{font-family:var(--font-ui);font-weight:700;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:3px 0 0}
.tier .ttag{font-size:12px;color:var(--ink);font-weight:600;margin:9px 0 8px}
.tier ul{list-style:none;margin-top:2px}
.tier li{font-size:11px;line-height:1.5;color:var(--ink2);padding-left:12px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:3px;height:3px;border-radius:50%;background:var(--line2)}

/* phone frame */
.phone{border-radius:34px;background:#12222E;padding:6px;overflow:hidden}
.phone .screen{border-radius:26px;overflow:hidden;background:#fff}
.phone .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pcap{font-family:var(--font-ui);font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);text-align:center;margin-top:8px}

/* browser render card */
.rcard{border:1px solid #2C4451;border-radius:14px;overflow:hidden;background:#fff}
.rcard .bar{display:flex;align-items:center;gap:7px;padding:8px 12px;background:#12222E}
.rcard .dots{display:flex;gap:5px}
.rcard .dots i{width:7px;height:7px;border-radius:50%;background:#476372;display:block}
.rcard .url{font-family:var(--font-ui);font-weight:600;font-size:9.5px;letter-spacing:.08em;color:#C6D8DE}
.rcard .shot{overflow:hidden;background:#fff}
.rcard .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* stack table */
.stbl{width:100%;border-collapse:collapse}
.stbl th{font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
  text-align:left;padding:0 10px 8px 0;border-bottom:1px solid var(--line2)}
.stbl td{font-size:11.5px;line-height:1.42;color:var(--ink2);padding:7px 10px 7px 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.stbl td.l{font-weight:600;color:var(--ink);font-size:12px;width:150px}
.stbl td.c{color:var(--ink);font-weight:600;width:150px}

/* cover */
.lockup{display:flex;align-items:center;gap:14px;margin-top:38px;position:relative;z-index:2}
.lockup .mark{width:46px;height:46px;object-fit:contain;display:block}
.brand{font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.brand span{color:var(--teal)}
.lx{font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--line2);letter-spacing:.1em;padding:0 2px}
.partner{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.cover-hero{position:relative;z-index:2;margin-top:92px;max-width:520px}
.cover-hero .kicker{margin-bottom:22px}
.cover-sub{margin-top:26px;max-width:410px;font-size:15px;line-height:1.55;color:var(--ink2)}
.cover-phone{position:absolute;right:60px;top:296px;width:250px;z-index:3}
.cover-phone .pcap{color:var(--ink2)}
.cmeta{position:absolute;left:68px;bottom:104px;z-index:2;display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;gap:0 30px;max-width:660px}
.cmeta .clab{font-family:var(--font-ui);font-weight:600;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--line2);margin-bottom:6px}
.cmeta .cval{font-size:13px;color:var(--ink);line-height:1.35}
.cmeta .cval em{font-style:normal;color:var(--teal);font-weight:600}