/* torzonlinks.biz - the decisions reference
   Built to the supplied reference: friendly light landing page, soft pink hero,
   one coral accent used on every call to action and on feature subheadings,
   zigzag text and panel blocks, card grids, soft shadows, generous radii, FAQ
   before the footer, dark footer with link columns.
   Deliberately not carried over from the reference: no top navigation bar with
   a logo on the left and a menu on the right, no email capture form, no
   testimonials, ratings, stars or award badges. This site has no customers and
   will not invent any. */

:root{
  --ink:#3d4148;
  --ink2:#666c73;
  --dim:#8a9099;
  --coral:#fb5f66;
  --coral-dk:#e04a51;
  --coral-pale:#ffeff0;
  --blue:#3e9adc;
  --blue-pale:#eaf4fc;
  --grey:#f2f2f2;
  --grey2:#f3f4f5;
  --line:#e8ecee;
  --paper:#ffffff;
  --dark:#151515;
  --sh-sm:0 5px 10px rgba(0,0,0,.08);
  --sh-lg:0 24px 56px rgba(167,174,186,.16);
  --head:"Franklin Gothic Medium","Corbel","Calibri","Segoe UI",sans-serif;
  --body:"Calibri","Carlito","Lato","Segoe UI",sans-serif;
  --mono:"Consolas","DejaVu Sans Mono","Liberation Mono",monospace;
  --w:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.72 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:#337ab7;text-decoration:none}
a:hover{text-decoration:underline}
.w{max-width:var(--w);margin:0 auto;padding:0 20px;min-width:0}

/* slim identity rule, deliberately not a navigation bar */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .w{padding-top:15px;padding-bottom:14px}
.top b{font:700 20px/1.2 var(--head);color:var(--coral);letter-spacing:.01em}
.top span{display:block;margin-top:2px;font-size:14px;color:var(--dim)}

/* hero on the pink wash */
.hero{background:linear-gradient(180deg,#ffeff0 0%,#fff7f7 62%,#fff 100%);
  padding:44px 0 34px;border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 14px;font:500 clamp(29px,4.6vw,46px)/1.16 var(--head);color:var(--ink)}
.hero .sub{margin:0 0 22px;font-size:18px;line-height:1.65;color:var(--ink2);max-width:66ch}
.hero .chips{display:flex;flex-wrap:wrap;gap:9px}
.hero .chips span{background:#fff;border:1px solid var(--line);border-radius:50px;
  padding:9px 16px;font-size:14px;color:var(--ink2);box-shadow:var(--sh-sm)}

/* addresses */
.links{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-lg);padding:24px;margin:26px 0}
.links h2{margin:0 0 5px;font:500 21px/1.3 var(--head);color:var(--ink);border:0;padding:0;text-align:left}
.links > p{margin:0 0 17px;font-size:14.5px;color:var(--ink2);max-width:none}
.lrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--grey2);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;margin-bottom:8px}
.lrow:last-of-type{margin-bottom:0}
.lrow code{flex:1 1 260px;min-width:0;font:13px/1.5 var(--mono);color:var(--ink);word-break:break-all}
.lrow button{flex:none;background:var(--coral);color:#fff;border:0;border-radius:50px;
  padding:9px 20px;font:400 14px/1.35 var(--body);cursor:pointer}
.lrow button:hover{background:var(--coral-dk)}
.links .cav{margin:16px 0 0;font-size:13.5px;color:var(--dim)}

/* section links, coral pills */
.paths{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.paths a{border:1px solid var(--line);border-radius:50px;padding:10px 20px;
  font-size:14.5px;color:var(--ink2);background:#fff;text-decoration:none;box-shadow:var(--sh-sm)}
.paths a:hover,.paths a.on{background:var(--coral);border-color:var(--coral);color:#fff}

/* type */
h1{font:500 clamp(27px,4vw,40px)/1.2 var(--head);color:var(--ink);margin:26px 0 12px}
.lede{font-size:18px;line-height:1.68;color:var(--ink2);margin:0 0 26px;max-width:70ch}
h2{font:400 clamp(24px,3.1vw,32px)/1.28 var(--head);color:var(--ink);margin:38px 0 14px}
h3{font:500 21px/1.35 var(--head);color:var(--coral);margin:26px 0 8px}
p{margin:0 0 15px;max-width:76ch}
ul,ol{margin:0 0 17px;padding-left:23px;max-width:76ch}
li{margin-bottom:8px}
code{font:.9em var(--mono);background:var(--grey);border-radius:4px;padding:2px 6px;color:var(--ink)}
strong,b{color:var(--ink);font-weight:700}

/* the options panel, spine of every decision page */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:16px;margin:0 0 26px}
.opt{border:1px solid var(--line);border-radius:13px;padding:19px 21px;background:#fff;box-shadow:var(--sh-sm)}
.opt.pick{border-color:var(--coral);background:var(--coral-pale)}
.opt h4{margin:0 0 10px;font:500 19px/1.32 var(--head);color:var(--coral)}
.opt dl{margin:0}
.opt dt{font:700 12.5px/1.5 var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin-top:11px}
.opt dt:first-child{margin-top:0}
.opt dd{margin:2px 0 0;font-size:14.5px;color:var(--ink2);line-height:1.6}

/* zigzag block */
.zig{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;margin:0 0 30px}
.zig:nth-of-type(even) .zfig{order:-1}
.zig h3{margin-top:0}
.zig p{margin-bottom:12px}
.zfig{background:var(--blue-pale);border:1px solid #d8e9f7;border-radius:16px;padding:22px 24px}
.zfig b{display:block;margin-bottom:11px;font:500 16px/1.4 var(--head);color:var(--ink)}
.zfig ul{margin:0;padding-left:20px}
.zfig li{font-size:14.5px;color:var(--ink2);margin-bottom:8px}
.zfig li b{display:inline;color:var(--ink);font-weight:700;font-family:var(--body);font-size:inherit}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px;margin:0 0 30px}
.cards a{display:block;border:1px solid var(--line);border-radius:12px;padding:19px 21px;
  background:#fff;text-decoration:none;color:var(--ink2);box-shadow:var(--sh-sm)}
.cards a:hover{box-shadow:var(--sh-lg);border-color:#dfe5e8}
.cards a b{display:block;font:500 18px/1.34 var(--head);color:var(--coral);margin-bottom:6px}
.cards a span{display:block;font-size:14.5px;line-height:1.6}

/* callouts */
.note{border:1px solid var(--line);border-left:4px solid var(--coral);background:var(--coral-pale);
  border-radius:10px;padding:15px 19px;margin:22px 0;font-size:15.5px}
.note.calm{border-left-color:var(--blue);background:var(--blue-pale)}
.note.plain{border-left-color:#cfd6da;background:var(--grey2)}
.note b{display:block;margin-bottom:5px;color:var(--ink);
  font:700 12.5px/1.4 var(--body);letter-spacing:.05em;text-transform:uppercase}

/* tables scroll rather than widening the page */
.tw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
th,td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
th{background:var(--grey2);color:var(--ink);font-weight:700;white-space:nowrap;font-size:13.5px}
td{background:#fff;color:var(--ink2)}
td b{color:var(--ink)}

/* numbered steps */
.steps{list-style:none;padding:0;counter-reset:s;max-width:76ch}
.steps li{position:relative;padding-left:44px;margin-bottom:14px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:28px;height:28px;
  border-radius:50px;background:var(--coral);color:#fff;
  font:400 14px/28px var(--body);text-align:center}

/* prev / next */
.pn{display:flex;flex-wrap:wrap;gap:13px;margin:34px 0 0;border-top:1px solid var(--line);padding-top:20px}
.pn a{flex:1 1 240px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;
  background:#fff;text-decoration:none;color:var(--ink2);box-shadow:var(--sh-sm)}
.pn a:hover{border-color:var(--coral)}
.pn a em{display:block;font-style:normal;font-size:12px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.pn a b{color:var(--coral);font-weight:500;font-family:var(--head);font-size:16px}

.crumb{font-size:13.5px;color:var(--dim);margin:22px 0 0}

/* dark footer with columns */
.foot{background:var(--dark);color:#c9cdd2;margin-top:46px;padding:38px 0 40px}
.foot h2{color:#fff;font:700 12.5px/1 var(--body);letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 13px;opacity:.6;border:0}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.foot a{display:block;color:#c9cdd2;font-size:14.5px;padding:4px 0;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .fine{margin:28px 0 0;padding-top:20px;border-top:1px solid #2a2a2a;
  color:#8b9097;font-size:13.5px;max-width:none}

@media (max-width:820px){
  .zig{grid-template-columns:1fr;gap:18px}
  .zig:nth-of-type(even) .zfig{order:0}
}
@media (max-width:600px){
  body{font-size:15.5px}
  .links{padding:16px;border-radius:12px}
  .lrow code{flex-basis:100%;font-size:12px}
  .hero{padding:28px 0 22px}
}