/* DCM Insider — free trial page (patterns/trial-landing.php).
 *
 * Everything is scoped under .trial / .trial-form so nothing here can leak
 * into the rest of the site, and the dark .field / .form styles used by the
 * other landing pages can't leak in.
 *
 * One spacing scale: 4 8 12 16 24 32 48 64 96.
 * v1.7.1
 */

.trial{
  --t-white:#FFFFFF;
  --t-text:var(--on-paper,#16212C);
  --t-dim:var(--on-paper-dim,#51616E);
  --t-line:var(--line-light,rgba(14,23,34,.13));
  --t-line-strong:rgba(14,23,34,.28);
  --t-brass:var(--brass,#C18B43);
  --t-brass-2:var(--brass-2,#D8A65C);
  --t-brass-dark:#8F6128;
  --t-error:#B3261E;
  background:var(--paper,#F1F2EE);
  color:var(--t-text);
  font-size:1.0625rem;
  line-height:1.6;
  padding-inline:clamp(20px,5vw,40px);
  display:flow-root; /* keep child margins inside each band */
}
.trial--top{padding-top:64px}
.trial--mid{padding-bottom:64px}
.trial--next{background:var(--paper-2,#FBFBF9);border-top:1px solid var(--t-line);padding-block:64px}
@media (max-width:600px){
  .trial--top{padding-top:32px}
  .trial--mid{padding-bottom:48px}
  .trial--next{padding-block:48px}
}

.trial__col{max-width:40rem;margin-inline:auto}

:where(.trial) :where(h1,h2,h3){font-family:"Spectral",Georgia,serif;font-weight:600;letter-spacing:-.015em;line-height:1.12;color:var(--t-text);margin:0}
:where(.trial) :where(p){margin:0}
:where(.trial) :where(a){color:var(--t-text);text-decoration:underline;text-underline-offset:3px}
:where(.trial) :where(a):hover{color:var(--t-brass-dark)}

.trial__title{font-size:clamp(2rem,1.5rem + 2vw,2.7rem);margin-bottom:16px;text-wrap:balance}
.trial__lede{color:var(--t-dim);font-size:1.1rem;margin-bottom:32px}
.trial__h2{font-size:1.4rem;margin-bottom:16px}
.trial__text{color:var(--t-dim)}

.trial__rule{border:0;border-top:1px solid var(--t-line);margin:48px 0}

/* reassurances */
.trial__proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trial__proof h2{font-size:1.05rem;margin-bottom:4px}
.trial__proof p{color:var(--t-dim);font-size:.93rem}
@media (max-width:600px){ .trial__proof{grid-template-columns:1fr;gap:16px} }

/* sample article ([dcm_trial_sample]) */
.trial-sample{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;background:var(--paper-2,#FBFBF9);border:1px solid var(--t-line);border-left:3px solid var(--t-brass);border-radius:6px;padding:24px}
.trial-sample--noimg{grid-template-columns:1fr}
.trial-sample > *{min-width:0}
/* Show the whole image. Featured images here are often charts, and cropping
   them cuts off their titles and labels. */
.trial-sample .trial-sample__img{display:block;width:100%;height:auto;border:1px solid var(--t-line);border-radius:4px;background:var(--t-white)}
/* Same size and tracking as the category labels on the home page cards.
   Selectors are doubled up so the general ".trial-sample p" rule below
   can't override them. */
.trial-sample .trial-sample__cats{display:flex;flex-wrap:wrap;row-gap:2px;margin:0;font-family:"IBM Plex Mono",monospace;font-size:.68rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--t-brass-dark)}
.trial-sample .trial-sample__cats span{white-space:nowrap}
.trial-sample .trial-sample__cats i{font-style:normal;color:var(--t-dim);opacity:.6;margin:0 .45em;font-weight:400}
.trial-sample h3{font-size:1.2rem;line-height:1.2;margin:8px 0;text-wrap:balance}
.trial-sample h3 a{color:var(--t-text);text-decoration:none}
.trial-sample h3 a:hover{color:var(--t-brass-dark);text-decoration:underline}
.trial-sample p{color:var(--t-dim);font-size:.97rem}
.trial-sample .trial-sample__date{margin-top:12px;font-size:.88rem}
@media (max-width:600px){ .trial-sample{grid-template-columns:1fr} }

/* what happens next */
.trial__steps{list-style:none;margin:0 0 48px;padding:0;display:grid;gap:24px;counter-reset:st}
.trial__steps li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;column-gap:12px;border-left:2px solid var(--t-brass);padding-left:16px}
.trial__steps li::before{content:counter(st);grid-row:1 / span 2;font-family:"Spectral",Georgia,serif;font-weight:600;font-size:1.3rem;line-height:1.3;color:var(--t-brass-dark)}
.trial__steps h3{font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:0;margin-bottom:4px}
.trial__steps p{color:var(--t-dim);font-size:.97rem}

/* FAQ */
.trial__faq{border-top:1px solid var(--t-line)}
.trial__faq details{border-bottom:1px solid var(--t-line)}
.trial__faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.trial__faq summary::-webkit-details-marker{display:none}
.trial__faq summary::after{content:"+";font-weight:400;color:var(--t-dim);font-size:1.2rem;line-height:1}
.trial__faq details[open] summary::after{content:"\2013"}
.trial__faq summary:focus-visible{outline:2px solid var(--t-brass);outline-offset:2px}
.trial__faq details p{padding:0 0 16px;color:var(--t-dim);max-width:62ch}

/* ---------------------------------------------------------------------
   The form (Contact Form 7, html_class="trial-form"): one field, work email.
   Email and button sit side by side; they stack on phones.
   --------------------------------------------------------------------- */
.trial-form{margin:0}
.trial-form .trial-field{margin:0}
.trial-form .trial-field > label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--t-text)}
.trial-form .wpcf7-form-control-wrap{display:block}
.trial-form input[type="email"]{
  width:100%;font:inherit;font-size:1rem;color:var(--t-text);background:var(--t-white);
  border:1px solid var(--t-line-strong);border-radius:6px;padding:12px 14px;height:50px;
  box-shadow:none;
}
.trial-form input[type="email"]:focus{outline:2px solid var(--t-brass);outline-offset:1px;border-color:var(--t-brass)}
.trial-form .wpcf7-not-valid{border-color:var(--t-error)!important}
.trial-form .wpcf7-not-valid-tip{display:block;color:var(--t-error);font-size:.85rem;margin-top:6px}

.trial-form .trial-inline{display:flex;gap:12px;align-items:flex-start}
.trial-form .trial-inline .wpcf7-form-control-wrap{flex:1}
@media (max-width:600px){ .trial-form .trial-inline{flex-direction:column;align-items:stretch} }

/* v1.8.2 markup: <label class="trial-field"> wraps the label text and the
   field, so no id is needed and the form can appear twice on one page.
   The button is nudged down to line up with the field, not the label. */
.trial-form .trial-inline > .trial-field{flex:1;min-width:0;display:block}
.trial-form .trial-lbl{display:block;font-weight:600;font-size:.92rem;line-height:24px;margin-bottom:6px;color:var(--t-text)}
.trial-form .trial-inline--labelled input.trial-btn{margin-top:30px}
@media (max-width:600px){ .trial-form .trial-inline--labelled input.trial-btn{margin-top:0} }

.trial-form input.trial-btn{
  -webkit-appearance:none;appearance:none;
  font:inherit;font-weight:700;font-size:1rem;letter-spacing:.01em;
  background:var(--t-brass);color:#1A130A;border:1px solid var(--t-brass);border-radius:6px;
  padding:0 22px;height:50px;cursor:pointer;white-space:nowrap;width:auto;
}
.trial-form input.trial-btn:hover{background:var(--t-brass-2);border-color:var(--t-brass-2)}
.trial-form input.trial-btn:focus-visible{outline:2px solid var(--ink,#0E1722);outline-offset:2px}
@media (max-width:600px){ .trial-form input.trial-btn{width:100%} }

/* While sending: dim the button instead of showing CF7's spinner, which
   would otherwise sit awkwardly inside the email/button row. */
.trial-form .wpcf7-spinner{display:none}
.trial-form.submitting input.trial-btn{opacity:.6;cursor:progress}

.trial-form .trial-small{font-size:.85rem;color:var(--t-dim);margin-top:12px}

/* confirmation: CF7 adds .sent to the form */
.trial-form .trial-done{display:none;border-left:3px solid var(--t-brass);padding:8px 0 8px 16px}
.trial-form .trial-done h2{font-size:1.25rem;margin-bottom:8px}
.trial-form .trial-done p{color:var(--t-dim)}
.trial-form.sent .trial-step{display:none}
.trial-form.sent .trial-done{display:block}
.trial-form.sent .wpcf7-response-output{display:none}

/* CF7's own message line, for errors */
.trial-form .wpcf7-response-output{margin:16px 0 0!important;padding:10px 14px!important;border:1px solid var(--t-error)!important;border-radius:6px;color:var(--t-error);font-size:.92rem}
.trial-form .wpcf7-response-output:empty{display:none}
.trial-form.init .wpcf7-response-output{display:none}

/* Turnstile, if used */
.trial-form .wpcf7-turnstile,.trial-form .cf-turnstile{margin:16px 0 0}

/* =====================================================================
   Newsletter page (patterns/newsletter-landing.php)             v1.8.0
   Reuses the .trial layout above. The form is the existing newsletter
   form, so these rules style ordinary CF7 markup (an email field and a
   submit button) rather than relying on special classes inside it.
   ===================================================================== */

.nl-form .wpcf7{margin:0}
.nl-form .wpcf7-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.nl-form .wpcf7-form p{display:contents}
.nl-form .wpcf7-form br{display:none}
.nl-form .wpcf7-form label{display:block;font-weight:600;font-size:.92rem;color:var(--t-text);flex:1 1 100%}
.nl-form .wpcf7-form-control-wrap{display:block;flex:1 1 260px;min-width:0}
.nl-form input.wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]){
  width:100%;font:inherit;font-size:1rem;color:var(--t-text);background:var(--t-white);
  border:1px solid var(--t-line-strong);border-radius:6px;padding:12px 14px;height:50px;box-shadow:none;
}
.nl-form input.wpcf7-form-control:not(.wpcf7-submit)::placeholder{color:#7A8791}
.nl-form input.wpcf7-form-control:not(.wpcf7-submit):focus{outline:2px solid var(--t-brass);outline-offset:1px;border-color:var(--t-brass)}
.nl-form input.wpcf7-submit{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  font:inherit;font-weight:700;font-size:1rem;letter-spacing:.01em;
  background:var(--t-brass);color:#1A130A;border:1px solid var(--t-brass);border-radius:6px;
  padding:0 22px;height:50px;cursor:pointer;white-space:nowrap;
}
.nl-form input.wpcf7-submit:hover{background:var(--t-brass-2);border-color:var(--t-brass-2)}
.nl-form input.wpcf7-submit:focus-visible{outline:2px solid var(--ink,#0E1722);outline-offset:2px}
@media (max-width:600px){
  .nl-form .wpcf7-form-control-wrap{flex-basis:100%}
  .nl-form input.wpcf7-submit{width:100%}
}
.nl-form .wpcf7-not-valid{border-color:var(--t-error)!important}
.nl-form .wpcf7-not-valid-tip{display:block;color:var(--t-error);font-size:.85rem;margin-top:6px}
.nl-form .wpcf7-spinner{display:none}
.nl-form .wpcf7-form.submitting input.wpcf7-submit{opacity:.6;cursor:progress}

/* messages: errors in red, success replaces the form */
.nl-form .wpcf7-response-output{flex:1 1 100%;margin:4px 0 0!important;padding:10px 14px!important;border:1px solid var(--t-error)!important;border-radius:6px;color:var(--t-error);font-size:.92rem}
.nl-form .wpcf7-response-output:empty,
.nl-form .wpcf7-form.init .wpcf7-response-output{display:none}
.nl-form .wpcf7-form.sent > *:not(.wpcf7-response-output){display:none}
.nl-form .wpcf7-form.sent .wpcf7-response-output{
  border:0!important;border-left:3px solid var(--t-brass)!important;border-radius:0;
  padding:8px 0 8px 16px!important;margin:0!important;color:var(--t-text);font-size:1.05rem;
}
/* the privacy line belongs to the form; hide it once they're signed up */
.nl-form:has(.wpcf7-form.sent) + .nl-small{display:none}

.nl-small{font-size:.85rem;color:var(--t-dim);margin-top:12px}

/* the latest newsletter ([dcm_latest_newsletter]) */
.nl-issue{background:var(--t-white);border:1px solid var(--t-line);border-radius:8px;overflow:hidden}
.nl-issue__head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;background:var(--ink,#0E1722);color:var(--on-ink,#ECEDE7);padding:16px 24px}
.nl-issue__brand{font-weight:700;letter-spacing:.06em;font-size:.9rem}
.nl-issue__date{font-size:.85rem;color:var(--on-ink-dim,#9FABB6)}
.nl-issue__body{padding:24px}
@media (max-width:600px){ .nl-issue__head,.nl-issue__body{padding-inline:16px} }
.nl-issue__title{font-size:1.25rem;margin-bottom:16px;text-wrap:balance}
.nl-issue__title a{color:var(--t-text);text-decoration:none}
.nl-issue__title a:hover{color:var(--t-brass-dark);text-decoration:underline}
.nl-issue__body p{margin:0 0 16px;font-size:1rem;line-height:1.65}
.nl-issue__body ol,.nl-issue__body ul{margin:0 0 16px;padding-left:1.4rem}
.nl-issue__body li{margin-bottom:12px;font-size:1rem;line-height:1.65}
.nl-issue__body ol li::marker{color:var(--t-brass-dark);font-weight:600}
.nl-issue__body h2,.nl-issue__body h3,.nl-issue__body h4{font-size:1.1rem;margin:24px 0 8px}
.nl-issue__body img{max-width:100%;height:auto}
.nl-issue__body figure{margin:0 0 16px}
.nl-issue__body table{display:block;overflow-x:auto;max-width:100%}
.nl-issue__body > :last-child{margin-bottom:0}
.nl-issue__more{padding:12px 24px;border-top:1px solid var(--t-line);background:var(--paper-2,#FBFBF9);font-size:.9rem}

/* the sign-up box at the bottom (newsletter and trial pages) */
.nl-closing{margin-top:48px;background:var(--t-white);border:1px solid var(--t-line);border-top:3px solid var(--t-brass);border-radius:8px;padding:32px}
@media (max-width:600px){ .nl-closing{padding:24px} }
.nl-closing h2{font-size:1.4rem;margin-bottom:16px}