/* Ranch Link website. Brand board colors: Hunter Orange, Brush, Limestone,
   Mesquite, Sage (brand/ranch-link-brand.md). Type: Archivo Expanded 800
   for headlines, Archivo for the rest, IBM Plex Mono 500 tracked caps for
   labels and readouts.
   Hunter Orange as text only on Brush. Orange fills carry Brush text. Links
   on Limestone use a deep orange-brown (--link) that's dark enough to read. */
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url(/static/fonts/archivo-400.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url(/static/fonts/archivo-600.woff2) format("woff2"); }
@font-face { font-family: "Archivo Expanded"; font-weight: 800; font-display: swap; src: url(/static/fonts/archivo-expanded-800.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/static/fonts/IBMPlexMono-Medium.woff2) format("woff2"); }

:root {
  --orange: #FF6B00;     /* Hunter Orange */
  --brush: #1A1D16;      /* Brush */
  --limestone: #EEE8DA;  /* Limestone */
  --mesquite: #5B4632;   /* Mesquite */
  --sage: #8E9478;       /* Sage */

  --bg: var(--limestone);
  --paper: #F7F6EE;
  --ink: var(--brush);
  --muted: var(--mesquite);
  --line: #D8D2BE;
  --chip: #E3DECB;
  --accent: var(--orange);   /* every action */
  --accent-ink: var(--brush);
  --link: #A84300;           /* orange for text on light backgrounds */
  --hi-soft: #FCE1CB;
  --rust: #B3261E;
  --ok: #3D6B2E;
  --dark: var(--brush);      /* header, hero, footer bands */
  --dark-ink: var(--limestone);
  --dark-muted: #B9B5A2;
  --radius: 10px;
  --display: "Archivo Expanded", "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1D16; --paper: #23271F; --ink: #EEE8DA; --muted: #B9B5A2; --line: #363A2E; --chip: #2E3228;
    --link: #FF8A3D; --hi-soft: #3A2616; --rust: #F28B82; --ok: #9CC08A;
    color-scheme: dark;
  }
  .top { border-bottom: 1px solid var(--line); }
  footer.foot { border-top: 1px solid var(--line); }
  .hero { border-bottom: 1px solid var(--line); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.55 var(--sans); }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1.05; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; line-height: 1.25; margin: 0; }
p { margin: 0 0 1em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 480px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.label { font: 500 .74rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.or { color: var(--orange); }
[hidden] { display: none !important; }

/* ---- header / footer: Brush bands, like the board ---- */
.top { background: var(--dark); color: var(--dark-ink); --mark-beam: var(--orange); --mark-dot: var(--limestone); --mark-sub: var(--sage); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; color: var(--dark-ink); text-decoration: none; }
.brand svg { display: block; height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .nav button.linkish { color: var(--dark-ink); text-decoration: none; padding: 8px 11px; border-radius: 8px; font: inherit; font-size: .95rem; }
.nav a:hover, .nav button.linkish:hover { background: rgba(238, 235, 218, .09); }
.nav a.btn { color: var(--accent-ink); margin-left: 6px; }
.nav form { margin: 0; }
footer.foot { background: var(--dark); color: var(--dark-muted); margin-top: 72px; padding: 36px 0 40px; font-size: .92rem;
  --mark-beam: var(--orange); --mark-dot: var(--limestone); --mark-sub: var(--sage); }
footer.foot .wrap { display: grid; grid-template-columns: auto 1fr; gap: 18px 48px; align-items: end; }
footer.foot .logo { color: var(--dark-ink); }
footer.foot .logo svg { display: block; height: 58px; width: auto; }
footer.foot .tagline { color: var(--dark-ink); margin: 0 0 6px; }
footer.foot .links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
footer.foot a { color: var(--dark-ink); }

/* ---- buttons and forms ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem/1.2 var(--sans); padding: 12px 18px;
  border-radius: var(--radius); border: 1.5px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.07); }
.btn.quiet { background: transparent; color: var(--link); border-color: var(--link); }
.btn.small { padding: 8px 12px; font-size: .92rem; }
.btn.danger { background: transparent; color: var(--rust); border-color: var(--rust); }
.btn.dark { background: var(--brush); border-color: var(--brush); color: var(--limestone); }
.btn[disabled], .btn.off { opacity: .45; pointer-events: none; }
button.linkish { background: none; border: none; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 0; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 14px 0 6px; }
input[type=email], input[type=password], input[type=text] { width: 100%; font: inherit; padding: 12px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); }
input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 0, .22); }
.hint { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.formbox { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 24px 0; }
.formbox .btn { width: 100%; margin-top: 18px; }
.formbox h2 { font-size: 1.05rem; }
.alert { border-radius: var(--radius); padding: 12px 14px; margin: 16px 0; border: 1.5px solid; }
.alert.bad { border-color: var(--rust); color: var(--rust); background: var(--paper); }
.alert.ok { border-color: var(--ok); background: var(--paper); }
.alert.note { border-color: var(--orange); background: var(--hi-soft); color: var(--ink); }
main > h1:first-child, .narrow > h1:first-child { margin-top: 36px; }
h1 + p { margin-top: 12px; }

/* ---- home: hero at sunset ---- */
/* The photo fills the right part of the band and fades into Brush on its
   left edge, so the headline sits on dark and the buck and feeder stay
   clear of it. Below 1180px it sits above the text instead. */
.hero { position: relative; overflow: hidden; background: var(--dark); color: var(--dark-ink); }
.hero .scene { position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; object-position: 50% 55%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
.hero .wrap { position: relative; padding-top: 72px; padding-bottom: 84px; }
.hero .copy { max-width: 470px; }
.hero .label { color: var(--sage); margin: 0 0 22px; line-height: 2; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); line-height: 1.02; }
.hero .lede { font-size: 1.12rem; margin: 22px 0 28px; color: var(--dark-ink); }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero .ctas a:not(.btn) { color: var(--dark-ink); }
.hero .free { margin: 26px 0 0; font-size: .95rem; color: var(--dark-muted); }
.hero .free strong { color: var(--dark-ink); }

/* ---- home: sections ---- */
.band { padding: 64px 0 8px; }
.band > .wrap > h2, .band .head { margin-bottom: 28px; }
.band .head .label { color: var(--muted); display: block; margin-bottom: 12px; }
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 40px 64px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 14px; }
.steps li::before { content: "0" counter(step); grid-row: span 2; font: 800 1.5rem/1.1 var(--display); color: var(--link); padding-top: 2px; }
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
.facts > div { border-top: 3px solid var(--orange); padding-top: 14px; }
.facts h3 { margin-bottom: 6px; }
.facts p { color: var(--muted); margin: 0; }
.plan { display: grid; grid-template-columns: auto 1fr; gap: 10px 48px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
.plan .price { font: 800 2.6rem/1 var(--display); }
.plan .price small { display: block; font: 400 .95rem/1.4 var(--sans); color: var(--muted); margin-top: 10px; }
.plan ul { margin: 0 0 20px; padding-left: 20px; }
.plan li { margin: 4px 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 15px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 4px; color: var(--muted); max-width: 46em; }
/* closing band: Brush on Hunter Orange, like the back of the business card */
.closer { background: var(--orange); color: var(--brush); margin-top: 72px; }
.closer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding-top: 48px; padding-bottom: 48px; }
.closer h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.08; }

/* the feeder cards, as they look on the base's page */
.phone { justify-self: center; width: min(330px, 100%); background: var(--bg); border: 1.5px solid var(--line); border-radius: 28px;
  padding: 0 0 14px; box-shadow: 0 26px 50px -24px rgba(26, 29, 22, .55); overflow: hidden; }
.phone .ph-head { background: var(--brush); color: var(--limestone); padding: 14px 16px 12px; }
.phone .ph-head svg { display: block; height: 15px; width: auto; margin-bottom: 8px; }
.phone .ph-head b { font: 800 1rem/1.2 var(--display); text-transform: uppercase; display: block; }
.phone .ph-head span { font: 500 .7rem/1.3 var(--mono); color: var(--sage); letter-spacing: .1em; text-transform: uppercase; }
.phone .fcard { margin: 12px 12px 0; }
.fcard { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.fcard .n { font-weight: 600; }
.fcard .n span { color: var(--muted); font-weight: 400; font-size: .9rem; }
.fcard .s { font-size: .9rem; margin: 4px 0 8px; }
.fcard .s .okc { color: var(--ok); }
.fcard .chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: .78rem; margin-bottom: 10px; }
.fcard .chips span { background: var(--chip); border-radius: 999px; padding: 2px 8px; }
.fcard .b { display: flex; gap: 6px; }
.fcard .b span { flex: 1; text-align: center; border-radius: 8px; padding: 7px; font-size: .88rem; border: 1px solid var(--line); }
.fcard .b span.feed { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; flex: 2; }

/* ---- app: bases ---- */
.pagehead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: 36px 0 8px; }
.bases { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--line); }
.base { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.base h3 { font-size: 1.3rem; }
.base .st { font-size: .95rem; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.base .det { font-size: .9rem; margin-top: 2px; padding-left: 18px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 107, 46, .2); }
.base .acts { display: flex; gap: 8px; align-items: center; }
.base .acts form { margin: 0; }
.empty { padding: 22px; border: 1.5px dashed var(--line); border-radius: 14px; margin: 18px 0; }
.cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin-top: 12px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.panel h2 { font-size: 1.05rem; margin-bottom: 12px; }
.codeform { display: flex; gap: 8px; margin-top: 12px; }
.codeform input { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; width: auto; flex: 1 1 auto; min-width: 0; max-width: 15rem; }
.subline { font-size: 1.05rem; margin: 0 0 14px; }

/* ---- admin ---- */
table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th { text-align: left; font: 500 .7rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
table.list td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list td .acts { display: flex; gap: 6px; flex-wrap: wrap; }
table.list td form { margin: 0; }
.tag { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: .8rem; font-weight: 600; background: var(--chip); border: 1px solid var(--line); white-space: nowrap; }
.tag.test { background: var(--hi-soft); border-color: var(--orange); }
.tag.all { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tag.off { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .86rem; }
.tablewrap { overflow-x: auto; }
.upform { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.upform input[type=file] { font: inherit; font-size: .92rem; max-width: 100%; }
.upform input[type=file]::file-selector-button { font: 600 .92rem var(--sans); padding: 8px 12px; margin-right: 10px; border-radius: 8px;
  border: 1.5px solid var(--link); background: transparent; color: var(--link); cursor: pointer; }

/* ---- a base that's offline ---- */
.offline { text-align: left; padding: 48px 0; }

@media (max-width: 1180px) {
  .hero .scene { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 520px; object-position: 60% 55%;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
  .hero .wrap { padding-top: 28px; padding-bottom: 48px; }
  .hero .copy { max-width: 640px; }
}
@media (max-width: 860px) {
  .how, .cols { grid-template-columns: 1fr; }
  .phone { justify-self: start; }
  .facts { grid-template-columns: 1fr 1fr; }
  .plan { grid-template-columns: 1fr; }
  footer.foot .wrap { grid-template-columns: 1fr; }
  footer.foot .links { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .facts { grid-template-columns: 1fr; }
  .base { grid-template-columns: 1fr; }
  .top .wrap { flex-wrap: wrap; gap: 8px; }
  .brand svg { height: 24px; }
  .nav a, .nav button.linkish { padding: 6px 8px; }
  .nav a.btn { margin-left: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .copy { animation: rise .7s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}