/* ============================================================
   TOSS SPORTS — pre-rendered page styling

   These pages are what a crawler and a first-time visitor from Google
   actually land on, so they have to read well on their own: dark navy
   like the rest of the brand, generous type, and no dependency on the
   app having booted.
   ============================================================ */

.seo-page{
  background:#0B0B1A;
  color:#EDEEF6;
  font:16px/1.65 Inter,system-ui,-apple-system,sans-serif;
  margin:0;
}
.seo-page .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.seo-page a{color:#FF8A1E;text-decoration:none}
.seo-page a:hover{text-decoration:underline}
.seo-page :focus-visible{outline:3px solid #FF8A1E;outline-offset:3px}

/* ---------- header ---------- */
.seo-hdr{border-bottom:1px solid rgba(255,255,255,.1);padding:14px 0;
  position:sticky;top:0;background:rgba(11,11,26,.92);backdrop-filter:blur(10px);z-index:10}
.seo-hdr .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.seo-brand{display:flex;align-items:center;gap:9px;font-family:Anton,Impact,sans-serif;
  font-size:1.3rem;letter-spacing:.02em;color:#fff!important;text-decoration:none!important}
.seo-brand em{color:#FF8A1E;font-style:normal}
.seo-nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap;font-size:.9rem;font-weight:600}
.seo-nav a{color:rgba(255,255,255,.75)}
.seo-nav a:hover{color:#fff}
.seo-nav .seo-cta{background:#FF8A1E;color:#160D00;padding:7px 16px;border-radius:100px}
.seo-nav .seo-cta:hover{background:#ffa04a;text-decoration:none}

/* ---------- body ---------- */
.seo-main{padding:34px 22px 60px;max-width:1080px}
.crumbs{font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:22px}
.crumbs a{color:rgba(255,255,255,.6)}

.seo-main h1{
  font-family:Anton,Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,3.2rem);line-height:1.02;letter-spacing:.01em;
  margin:0 0 16px;max-width:20ch;text-wrap:balance;
}
.seo-main h2{
  font-family:Anton,Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.1;
  margin:38px 0 12px;text-wrap:balance;
}
.seo-main h3{font-size:1.05rem;margin:0 0 8px;color:#fff}
.seo-main p{margin:0 0 16px;color:rgba(255,255,255,.82);max-width:70ch}
.seo-lede{font-size:1.08rem;color:rgba(255,255,255,.72)!important;max-width:66ch}

/* the passage written to be quoted */
.seo-answer{
  font-size:1.12rem;line-height:1.6;color:#fff!important;
  background:rgba(255,138,30,.09);border-left:3px solid #FF8A1E;
  padding:18px 22px;border-radius:0 10px 10px 0;margin:0 0 28px!important;max-width:72ch;
}

.seo-list{margin:0 0 20px;padding-left:20px;color:rgba(255,255,255,.82);max-width:70ch}
.seo-list li{margin-bottom:8px}

/* ---------- price and actions ---------- */
.seo-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.seo-price b{font-family:Anton,Impact,sans-serif;font-size:2.1rem;color:#FF8A1E;line-height:1}
.seo-price s{color:rgba(255,255,255,.4)}
.seo-price span{font-size:.82rem;color:rgba(255,255,255,.55)}

.seo-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.seo-btn{display:inline-block;background:#FF8A1E;color:#160D00!important;
  padding:12px 22px;border-radius:100px;font-weight:800;font-size:.92rem}
.seo-btn:hover{background:#ffa04a;text-decoration:none!important}
.seo-btn.ghost{background:transparent;color:#fff!important;
  border:1.5px solid rgba(255,255,255,.28)}
.seo-btn.ghost:hover{border-color:#FF8A1E}

/* ---------- specs ---------- */
.seo-specs{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 20px;font-size:.92rem}
.seo-specs th,.seo-specs td{
  text-align:left;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top}
.seo-specs th{color:rgba(255,255,255,.5);font-weight:600;width:38%}
.seo-specs td{color:#fff}

/* ---------- grids ---------- */
.seo-grid{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.seo-grid.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.seo-grid a{display:block;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px 17px;
  color:#fff!important;transition:.18s ease}
.seo-grid a:hover{border-color:#FF8A1E;text-decoration:none!important;transform:translateY(-2px)}
.seo-grid b{display:block;font-size:.98rem;line-height:1.3;margin-bottom:5px}
.seo-grid em{display:block;font-style:normal;font-size:.78rem;
  color:rgba(255,255,255,.55);line-height:1.45;margin-bottom:6px}
.seo-grid span{font-weight:800;color:#FF8A1E;font-size:.9rem}

/* ---------- faq ---------- */
.seo-faq{max-width:76ch;margin-bottom:20px}
.seo-faq details{border-bottom:1px solid rgba(255,255,255,.1);padding:14px 0}
.seo-faq summary{cursor:pointer;font-weight:600;color:#fff;list-style:none}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::before{content:'+ ';color:#FF8A1E;font-weight:900}
.seo-faq details[open] summary::before{content:'– '}
.seo-faq p{margin:10px 0 0;font-size:.94rem}

/* ---------- places ---------- */
.seo-places{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-bottom:24px}
.seo-places > div{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px 20px}

/* ---------- author block ---------- */
.seo-author{margin-top:36px;padding:20px 22px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);max-width:72ch}
.seo-author .seo-btn{margin-right:8px;margin-top:6px}

/* ---------- footer ---------- */
.seo-ftr{border-top:1px solid rgba(255,255,255,.1);padding:34px 0 0;margin-top:50px;
  font-size:.88rem}
.seo-ftr .wrap{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.seo-ftr b{display:block;margin-bottom:8px;color:#fff}
.seo-ftr p{margin:0 0 6px;color:rgba(255,255,255,.6);line-height:1.5}
.seo-ftr-bot{display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding:16px 22px 26px;
  color:rgba(255,255,255,.4);font-size:.78rem;grid-template-columns:none!important}

@media (max-width:600px){
  .seo-main{padding-top:24px}
  .seo-nav{gap:12px;font-size:.84rem;width:100%;margin-left:0}
}


/* ============================================================
   CONTACT US

   The only page in these templates that takes input rather than
   presenting text, so it carries the only form styling on the
   site's static side.

   Two panels: the business details a verification reviewer is
   checking, and the form a customer is filling in. Side by side
   where there is room, stacked where there is not, with the form
   FIRST in the source so a phone shows the thing to do before
   the reference material.
   ============================================================ */
.contact-grid{
  display:grid;
  gap:22px;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  margin-top:28px;
}
@media (min-width:880px){
  /* The form gets the wider column: it has two fields per row to fit,
     the details panel is only ever label-and-value. */
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px}
  /* Source order puts the form first for phones; on a desktop the
     reference panel reads better on the left. */
  .contact-card--form{order:2}
  .contact-card--info{order:1}
}

.contact-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:24px;
}
@media (min-width:880px){ .contact-card{padding:28px} }
.contact-card > h2{
  margin:0 0 4px;
  font-size:1.18rem;
  line-height:1.25;
}
.contact-card > .contact-sub{
  margin:0 0 20px;
  font-size:.88rem;
  color:rgba(255,255,255,.55);
  line-height:1.5;
}

/* ---------- business details ---------- */
/* A description list, not a table: these are label/value pairs, and a
   table forces a column width that long addresses then fight. */
.contact-dl{margin:0;font-size:.92rem}
.contact-dl > div{
  display:grid;
  gap:2px 16px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.contact-dl > div:last-child{border-bottom:0;padding-bottom:0}
.contact-dl dt{
  color:rgba(255,255,255,.5);
  font-size:.76rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.contact-dl dd{margin:0;color:#EDEEF6;line-height:1.5;overflow-wrap:anywhere}
@media (min-width:520px){
  .contact-dl > div{grid-template-columns:128px minmax(0,1fr);align-items:baseline}
  .contact-dl dt{padding-top:1px}
}

.contact-places{margin-top:24px;display:grid;gap:16px}
.contact-place{
  border-left:2px solid rgba(255,138,30,.6);
  padding-left:14px;
}
.contact-place b{display:block;color:#fff;font-size:.92rem;margin-bottom:3px}
.contact-place p{margin:0;font-size:.87rem;color:rgba(255,255,255,.62);line-height:1.55}
.contact-place a{white-space:nowrap}

/* the three desks — orders, business, legal — each its own small panel */
.contact-desks{margin-top:22px;display:grid;gap:14px}
.contact-desk{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 16px 14px;
  background:rgba(255,255,255,.03)}
.contact-desk:first-child{border-color:rgba(255,138,30,.45)}
.contact-desk > b{display:block;color:#fff;font-size:.96rem}
.contact-desk-for{margin:3px 0 12px;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.45}
.contact-desk .contact-dl{font-size:.88rem}

/* ---------- the form ---------- */
.contact-form{display:grid;gap:16px}
/* Two fields share a row once there is room for both to stay usable.
   Below that they stack — a 150px-wide phone field helps nobody. */
.contact-row{display:grid;gap:16px}
@media (min-width:480px){ .contact-row{grid-template-columns:1fr 1fr} }

.contact-field{display:grid;gap:7px;min-width:0}
.contact-field label{
  font-size:.79rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.contact-field .req{color:#FF8A1E}
.contact-field .hint{
  font-size:.76rem;
  color:rgba(255,255,255,.4);
  line-height:1.4;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:.95rem;
  line-height:1.45;
  color:#EDEEF6;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-appearance:none;
  appearance:none;
}
.contact-field textarea{resize:vertical;min-height:140px}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:rgba(255,255,255,.34)}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover{border-color:rgba(255,255,255,.28)}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  outline:none;
  border-color:#FF8A1E;
  background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(255,138,30,.2);
}

/* The native arrow disappears with appearance:none, so it is drawn back on
   as a background chevron. Encoded inline: these pages load no icon font. */
.contact-field select{
  padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEEF6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:17px;
}
/* The dropdown list itself is painted by the OS, which does not inherit the
   dark panel — so the options are given their own colours or they come out
   as black text on a black list in dark mode. */
.contact-field select option{background:#151530;color:#EDEEF6}

/* ---------- actions ---------- */
.btn-seo{
  display:inline-block;
  padding:13px 26px;
  border:0;
  border-radius:999px;
  background:#FF8A1E;
  color:#12121F!important;
  font:inherit;
  font-weight:800;
  font-size:.95rem;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none!important;
  text-align:center;
  transition:background .16s ease, transform .1s ease;
}
.btn-seo:hover{background:#FFA047}
.btn-seo:active{transform:translateY(1px)}
.btn-seo:disabled{opacity:.5;cursor:default;transform:none}
.contact-form .btn-seo{width:100%;margin-top:2px}
@media (min-width:480px){ .contact-form .btn-seo{width:auto;justify-self:start} }

/* Reserves no space until it says something, so the button does not shift
   down the moment the first character of a validation message appears. */
.contact-msg{margin:0;font-size:.88rem;line-height:1.5}
.contact-msg:empty{display:none}
.contact-msg.good{color:#7FE3A2}
.contact-msg.bad{color:#FF9B9B}

.contact-wa{width:100%;text-align:center}
@media (min-width:480px){ .contact-wa{width:auto;justify-self:start} }

.contact-alt{
  margin:0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.87rem;
  color:rgba(255,255,255,.6);
  line-height:1.6;
}